@shopify/polaris-tokens से migrate करना
@shopify/polaris-tokens, Polaris React का token package है। Polaris web components इसका इस्तेमाल नहीं करते: runtime अपने ख़ुद के variables परिभाषित करता है, और ज़्यादातर नाम वैसे ही रहते हैं। अगर आपके app का CSS किसी Polaris React app से आया है, तो उसे इन सूचियों से मिलाकर देखें। जो नाम सिर्फ़ legacy package में है, उसकी web components app में कोई value नहीं होती, इसलिए उसे इस्तेमाल करने वाले CSS को आपका लिखा हुआ var() fallback मिलता है, या कुछ भी नहीं।
@shopify/polaris-tokens 9.4.2 में मौजूद, लेकिन web components runtime द्वारा परिभाषित नहीं (87)
--p-color-bg-fill-emphasis--p-color-bg-fill-emphasis-active--p-color-bg-fill-emphasis-hover--p-color-bg-fill-magic--p-color-bg-fill-magic-secondary--p-color-bg-fill-magic-secondary-active--p-color-bg-fill-magic-secondary-hover--p-color-bg-surface-emphasis--p-color-bg-surface-emphasis-active--p-color-bg-surface-emphasis-hover--p-color-bg-surface-magic--p-color-bg-surface-magic-active--p-color-bg-surface-magic-hover--p-color-border-emphasis--p-color-border-emphasis-active--p-color-border-emphasis-hover--p-color-border-magic--p-color-border-magic-secondary--p-color-border-magic-secondary-hover--p-color-icon-emphasis--p-color-icon-emphasis-active--p-color-icon-emphasis-hover--p-color-icon-magic--p-color-text-emphasis--p-color-text-emphasis-active--p-color-text-emphasis-hover--p-color-text-emphasis-on-bg-fill--p-color-text-emphasis-on-bg-fill-active--p-color-text-emphasis-on-bg-fill-hover--p-color-text-magic--p-color-text-magic-on-bg-fill--p-color-text-magic-secondary--p-text-body-lg-font-family--p-text-body-lg-font-letter-spacing--p-text-body-lg-font-line-height--p-text-body-lg-font-size--p-text-body-lg-font-weight--p-text-body-md-font-family--p-text-body-md-font-letter-spacing--p-text-body-md-font-line-height--p-text-body-md-font-size--p-text-body-md-font-weight--p-text-body-sm-font-family--p-text-body-sm-font-letter-spacing--p-text-body-sm-font-line-height--p-text-body-sm-font-size--p-text-body-sm-font-weight--p-text-body-xs-font-family--p-text-body-xs-font-letter-spacing--p-text-body-xs-font-line-height--p-text-body-xs-font-size--p-text-body-xs-font-weight--p-text-heading-2xl-font-family--p-text-heading-2xl-font-letter-spacing--p-text-heading-2xl-font-line-height--p-text-heading-2xl-font-size--p-text-heading-2xl-font-weight--p-text-heading-3xl-font-family--p-text-heading-3xl-font-letter-spacing--p-text-heading-3xl-font-line-height--p-text-heading-3xl-font-size--p-text-heading-3xl-font-weight--p-text-heading-lg-font-family--p-text-heading-lg-font-letter-spacing--p-text-heading-lg-font-line-height--p-text-heading-lg-font-size--p-text-heading-lg-font-weight--p-text-heading-md-font-family--p-text-heading-md-font-letter-spacing--p-text-heading-md-font-line-height--p-text-heading-md-font-size--p-text-heading-md-font-weight--p-text-heading-sm-font-family--p-text-heading-sm-font-letter-spacing--p-text-heading-sm-font-line-height--p-text-heading-sm-font-size--p-text-heading-sm-font-weight--p-text-heading-xl-font-family--p-text-heading-xl-font-letter-spacing--p-text-heading-xl-font-line-height--p-text-heading-xl-font-size--p-text-heading-xl-font-weight--p-text-heading-xs-font-family--p-text-heading-xs-font-letter-spacing--p-text-heading-xs-font-line-height--p-text-heading-xs-font-size--p-text-heading-xs-font-weight
Web components runtime द्वारा परिभाषित, लेकिन @shopify/polaris-tokens में नहीं (343)
--p-border-radius-action--p-border-radius-avatar--p-border-radius-banner-inner--p-border-radius-checkbox--p-border-radius-checkbox-checked--p-border-radius-container--p-border-radius-content-highlight--p-border-radius-control--p-border-radius-control-inner--p-border-radius-corner-shape--p-border-radius-dialog--p-border-radius-element--p-border-radius-focus--p-border-radius-media--p-border-radius-media-compact--p-border-radius-option-item--p-border-radius-popover--p-border-radius-preview--p-border-radius-tag--p-border-radius-tag-inner--p-border-radius-tag-seam--p-border-width-outline-input-focus--p-color-app-bg--p-color-badge-bg-fill-caution--p-color-badge-bg-fill-critical--p-color-badge-bg-fill-info--p-color-badge-bg-fill-success--p-color-badge-bg-fill-warning--p-color-badge-text-ai--p-color-badge-text-caution--p-color-badge-text-critical--p-color-badge-text-critical-on-bg-fill--p-color-badge-text-info--p-color-badge-text-success--p-color-badge-text-warning--p-color-bg-accent--p-color-bg-accent-active--p-color-bg-accent-disabled--p-color-bg-accent-hover--p-color-bg-accent-selected--p-color-bg-ai-accent--p-color-bg-ai-accent-active--p-color-bg-ai-accent-hover--p-color-bg-ai-accent-selected--p-color-bg-brand-accent--p-color-bg-brand-accent-active--p-color-bg-brand-accent-disabled--p-color-bg-brand-accent-hover--p-color-bg-brand-accent-selected--p-color-bg-caution-accent--p-color-bg-caution-accent-active--p-color-bg-caution-accent-hover--p-color-bg-caution-accent-selected--p-color-bg-critical-accent--p-color-bg-critical-accent-active--p-color-bg-critical-accent-disabled--p-color-bg-critical-accent-hover--p-color-bg-critical-accent-selected--p-color-bg-fill-ai--p-color-bg-fill-ai-active--p-color-bg-fill-ai-hover--p-color-bg-fill-ai-secondary--p-color-bg-fill-ai-secondary-active--p-color-bg-fill-ai-secondary-hover--p-color-bg-fill-highlight--p-color-bg-fill-highlight-active--p-color-bg-fill-highlight-hover--p-color-bg-fill-highlight-secondary--p-color-bg-highlight-accent--p-color-bg-highlight-accent-active--p-color-bg-highlight-accent-hover--p-color-bg-highlight-accent-selected--p-color-bg-info-accent--p-color-bg-info-accent-active--p-color-bg-info-accent-hover--p-color-bg-info-accent-selected--p-color-bg-success-accent--p-color-bg-success-accent-active--p-color-bg-success-accent-hover--p-color-bg-success-accent-selected--p-color-bg-surface-ai--p-color-bg-surface-ai-active--p-color-bg-surface-ai-hover--p-color-bg-surface-highlight--p-color-bg-surface-highlight-active--p-color-bg-surface-highlight-hover--p-color-bg-surface-overlay--p-color-bg-surface-selected-hover--p-color-bg-warning-accent--p-color-bg-warning-accent-active--p-color-bg-warning-accent-hover--p-color-bg-warning-accent-selected--p-color-border-ai--p-color-border-ai-active--p-color-border-ai-hover--p-color-border-ai-secondary--p-color-border-ai-secondary-active--p-color-border-ai-secondary-hover--p-color-border-highlight--p-color-border-highlight-active--p-color-border-highlight-hover--p-color-button-bg-fill--p-color-button-bg-fill-active--p-color-button-bg-fill-critical--p-color-button-bg-fill-critical-active--p-color-button-bg-fill-critical-hover--p-color-button-bg-fill-hover--p-color-button-gradient-bg-fill-critical--p-color-button-group-divider--p-color-button-group-divider-brand--p-color-button-primary-bg--p-color-button-primary-bg-active--p-color-button-primary-bg-critical--p-color-button-primary-bg-critical-active--p-color-button-primary-bg-critical-disabled--p-color-button-primary-bg-critical-hover--p-color-button-primary-bg-disabled--p-color-button-primary-bg-hover--p-color-button-primary-disclosure--p-color-button-primary-disclosure-active--p-color-button-primary-disclosure-critical--p-color-button-primary-disclosure-disabled--p-color-button-primary-disclosure-hover--p-color-button-primary-text--p-color-button-primary-text-active--p-color-button-primary-text-critical--p-color-button-primary-text-disabled--p-color-button-primary-text-hover--p-color-choice-bg-checked--p-color-choice-bg-checked-critical--p-color-choice-bg-checked-critical-active--p-color-choice-bg-checked-hover--p-color-choice-bg-surface--p-color-choice-bg-surface-disabled--p-color-choice-icon--p-color-choice-icon-critical--p-color-choice-icon-disabled--p-color-code-text--p-color-code-text-comment--p-color-code-text-connector--p-color-code-text-entity--p-color-code-text-function--p-color-code-text-keyword--p-color-code-text-number--p-color-code-text-operator--p-color-code-text-property--p-color-code-text-punctuation--p-color-code-text-string--p-color-code-text-type--p-color-details-text-critical--p-color-icon-accent--p-color-icon-ai--p-color-icon-ai-accent--p-color-icon-ai-accent-active--p-color-icon-ai-accent-hover--p-color-icon-ai-active--p-color-icon-ai-hover--p-color-icon-caution-accent--p-color-icon-caution-accent-active--p-color-icon-caution-accent-hover--p-color-icon-critical-accent--p-color-icon-critical-accent-active--p-color-icon-critical-accent-hover--p-color-icon-highlight--p-color-icon-highlight-accent--p-color-icon-highlight-accent-active--p-color-icon-highlight-accent-hover--p-color-icon-highlight-active--p-color-icon-highlight-hover--p-color-icon-info-accent--p-color-icon-info-accent-active--p-color-icon-info-accent-hover--p-color-icon-success-accent--p-color-icon-success-accent-active--p-color-icon-success-accent-hover--p-color-icon-tertiary--p-color-icon-warning-accent--p-color-icon-warning-accent-active--p-color-icon-warning-accent-hover--p-color-input-bg-surface-ai--p-color-input-bg-surface-error--p-color-nav-bg-fill--p-color-nav-bg-fill-hover--p-color-nav-icon--p-color-nav-icon-active--p-color-nav-icon-hover--p-color-nav-text--p-color-nav-text-active--p-color-nav-text-hover--p-color-nav-text-secondary--p-color-nav-text-secondary-active--p-color-nav-text-secondary-hover--p-color-page-button-bg-fill--p-color-page-button-bg-fill-active--p-color-page-button-bg-fill-hover--p-color-scrollbar-thumb-active--p-color-scrollbar-thumb-hover--p-color-text-accent--p-color-text-ai--p-color-text-ai-accent--p-color-text-ai-active--p-color-text-ai-hover--p-color-text-ai-on-accent--p-color-text-ai-on-accent-active--p-color-text-ai-on-accent-hover--p-color-text-ai-on-bg-fill--p-color-text-ai-secondary--p-color-text-brand-on-accent--p-color-text-brand-on-accent-active--p-color-text-brand-on-accent-disabled--p-color-text-brand-on-accent-hover--p-color-text-caution-accent--p-color-text-caution-on-accent--p-color-text-caution-on-accent-active--p-color-text-caution-on-accent-hover--p-color-text-critical-accent--p-color-text-critical-on-accent--p-color-text-critical-on-accent-active--p-color-text-critical-on-accent-hover--p-color-text-highlight--p-color-text-highlight-accent--p-color-text-highlight-active--p-color-text-highlight-hover--p-color-text-highlight-on-accent--p-color-text-highlight-on-accent-active--p-color-text-highlight-on-accent-hover--p-color-text-highlight-on-bg-fill--p-color-text-highlight-on-bg-fill-active--p-color-text-highlight-on-bg-fill-hover--p-color-text-highlight-secondary--p-color-text-info-accent--p-color-text-info-on-accent--p-color-text-info-on-accent-active--p-color-text-info-on-accent-hover--p-color-text-on-accent--p-color-text-on-accent-active--p-color-text-on-accent-disabled--p-color-text-on-accent-hover--p-color-text-success-accent--p-color-text-success-on-accent--p-color-text-success-on-accent-active--p-color-text-success-on-accent-hover--p-color-text-tertiary--p-color-text-warning-accent--p-color-text-warning-on-accent--p-color-text-warning-on-accent-active--p-color-text-warning-on-accent-hover--p-filter-nav-icon--p-filter-nav-icon-active--p-font-feature-settings--p-font-letter-spacing-body-large--p-font-letter-spacing-body-medium--p-font-letter-spacing-body-small--p-font-letter-spacing-body-x-small--p-font-letter-spacing-display-large--p-font-letter-spacing-display-medium--p-font-letter-spacing-display-small--p-font-letter-spacing-heading-large--p-font-letter-spacing-heading-medium--p-font-letter-spacing-heading-small--p-font-line-height-body-large--p-font-line-height-body-medium--p-font-line-height-body-small--p-font-line-height-body-x-small--p-font-line-height-button-label--p-font-line-height-details-text--p-font-line-height-display-large--p-font-line-height-display-medium--p-font-line-height-display-small--p-font-line-height-heading-large--p-font-line-height-heading-medium--p-font-line-height-heading-small--p-font-line-height-input-label--p-font-line-height-input-label-small--p-font-line-height-input-value--p-font-size-adjust-input-value--p-font-size-adjust-input-value-arabic--p-font-size-adjust-input-value-hebrew--p-font-size-avatar-initials--p-font-size-avatar-initials-long--p-font-size-body-large--p-font-size-body-medium--p-font-size-body-small--p-font-size-body-x-small--p-font-size-button-label--p-font-size-details-text--p-font-size-display-large--p-font-size-display-medium--p-font-size-display-small--p-font-size-heading-large--p-font-size-heading-medium--p-font-size-heading-small--p-font-size-input-label--p-font-size-input-label-small--p-font-size-input-value--p-font-weight-button-label--p-font-weight-details-text--p-font-weight-display-large--p-font-weight-display-medium--p-font-weight-display-small--p-font-weight-heading-large--p-font-weight-heading-medium--p-font-weight-heading-small--p-font-weight-input-label--p-font-weight-input-label-small--p-height-field-min-block-size--p-motion-ease-out-emphasized--p-shadow-banner--p-shadow-button-disabled--p-shadow-choice-checked--p-shadow-choice-critical-checked--p-shadow-container--p-shadow-control-inset--p-shadow-control-knob--p-shadow-dialog--p-shadow-input--p-shadow-input-ai--p-shadow-input-ai-focus--p-shadow-input-critical--p-shadow-input-critical-focus--p-shadow-input-disabled--p-shadow-input-error--p-shadow-input-error-focus--p-shadow-input-focus--p-shadow-input-strong--p-shadow-item-focus--p-shadow-nav-item-active--p-shadow-nav-selected--p-shadow-page-button--p-shadow-page-button-active--p-shadow-popover--p-shadow-section--p-shadow-toast--p-shadow-toolbar-action--p-shadow-toolbar-action-active--p-space-250--p-space-700--p-space-badge-icon-padding-inline-start--p-space-badge-icon-padding-inline-start-large--p-space-badge-padding-inline--p-space-badge-padding-inline-large--p-space-choice-margin--p-space-choice-size