Skip to content

Commit

Permalink
Remove v10 legacy custom properties (#8374)
Browse files Browse the repository at this point in the history 
### WHY are these changes introduced?

Fixes #8405 <!-- link to issue if one exists -->

Closes #4826


### WHAT is this pull request doing?

Removes the legacy custom properties outlined in #8405  from v11.

---------

Co-authored-by: Alex Page <[email protected]>
Co-authored-by: Aaron Casanova <[email protected]>
  • Loading branch information
@lgriffee @alex-page @aaronccasanova
3 people authored Apr 24, 2023
1 parent 4c04912 commit 37f3e2e
Show file tree
Hide file tree
Showing 32 changed files with 953 additions and 632 deletions.
253 changes: 253 additions & 0 deletions documentation/guides/migrating-from-v10-to-v11.md
View file

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion polaris-codemods/src/codemods/v9-scss-replace-color/transform.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@ import type {FileInfo, API, Options} from 'jscodeshift';
import type {Plugin} from 'postcss';
import postcss from 'postcss';
import valueParser from 'postcss-value-parser';
import {colors as tokenColors, createVar} from '@shopify/polaris-tokens';
import {colors as tokenColors} from './v10-legacy-colors';
import {createVar} from '@shopify/polaris-tokens';

import type {NamespaceOptions} from '../../utilities/sass';
import {
Expand Down
170 changes: 1 addition & 169 deletions polaris-tokens/src/token-groups/colors.ts → ...9-scss-replace-color/v10-legacy-colors.ts
View file
Original file line number Diff line number Diff line change
@@ -1,172 +1,4 @@
import type {MetadataProperties} from '../types';

export type ColorsBackgroundTokenAlias =
| 'background'
| 'background-hovered'
| 'background-pressed'
| 'background-selected';

export type ColorsActionTokenAlias =
| 'action-critical'
| 'action-critical-depressed'
| 'action-critical-disabled'
| 'action-critical-hovered'
| 'action-critical-pressed'
| 'action-primary'
| 'action-primary-depressed'
| 'action-primary-disabled'
| 'action-primary-hovered'
| 'action-primary-pressed'
| 'action-secondary'
| 'action-secondary-depressed'
| 'action-secondary-disabled'
| 'action-secondary-hovered'
| 'action-secondary-hovered-dark'
| 'action-secondary-pressed'
| 'action-secondary-pressed-dark';

export type ColorsSurfaceTokenAlias =
| 'surface'
| 'surface-attention'
| 'surface-critical'
| 'surface-critical-subdued'
| 'surface-critical-subdued-depressed'
| 'surface-critical-subdued-hovered'
| 'surface-critical-subdued-pressed'
| 'surface-dark'
| 'surface-depressed'
| 'surface-disabled'
| 'surface-highlight'
| 'surface-highlight-subdued'
| 'surface-highlight-subdued-hovered'
| 'surface-highlight-subdued-pressed'
| 'surface-hovered'
| 'surface-hovered-dark'
| 'surface-neutral'
| 'surface-neutral-disabled'
| 'surface-neutral-hovered'
| 'surface-neutral-pressed'
| 'surface-neutral-subdued'
| 'surface-neutral-subdued-dark'
| 'surface-pressed'
| 'surface-pressed-dark'
| 'surface-primary-selected'
| 'surface-primary-selected-hovered'
| 'surface-primary-selected-pressed'
| 'surface-search-field'
| 'surface-search-field-dark'
| 'surface-selected'
| 'surface-selected-hovered'
| 'surface-selected-pressed'
| 'surface-subdued'
| 'surface-success'
| 'surface-success-subdued'
| 'surface-success-subdued-hovered'
| 'surface-success-subdued-pressed'
| 'surface-warning'
| 'surface-warning-subdued'
| 'surface-warning-subdued-hovered'
| 'surface-warning-subdued-pressed';

export type ColorsBackdropTokenAlias = 'backdrop';

export type ColorsOverlayTokenAlias = 'overlay';

export type ColorsBorderTokenAlias =
| 'border'
| 'border-on-dark'
| 'border-neutral-subdued'
| 'border-hovered'
| 'border-disabled'
| 'border-subdued'
| 'border-depressed'
| 'border-shadow'
| 'border-shadow-subdued'
| 'border-critical'
| 'border-critical-subdued'
| 'border-critical-disabled'
| 'border-warning'
| 'border-warning-subdued'
| 'border-highlight'
| 'border-highlight-subdued'
| 'border-success'
| 'border-success-subdued';

export type ColorsTokenName =
| ColorsBackgroundTokenAlias
| ColorsActionTokenAlias
| ColorsSurfaceTokenAlias
| ColorsBackdropTokenAlias
| ColorsOverlayTokenAlias
| ColorsBorderTokenAlias
| 'decorative-five-icon'
| 'decorative-five-surface'
| 'decorative-five-text'
| 'decorative-four-icon'
| 'decorative-four-surface'
| 'decorative-four-text'
| 'decorative-one-icon'
| 'decorative-one-surface'
| 'decorative-one-text'
| 'decorative-three-icon'
| 'decorative-three-surface'
| 'decorative-three-text'
| 'decorative-two-icon'
| 'decorative-two-surface'
| 'decorative-two-text'
| 'divider-dark'
| 'divider'
| 'focused'
| 'hint-from-direct-light'
| 'icon-attention'
| 'icon-critical'
| 'icon-disabled'
| 'icon-highlight'
| 'icon-hovered'
| 'icon-on-critical'
| 'icon-on-dark'
| 'icon-on-interactive'
| 'icon-on-primary'
| 'icon-pressed'
| 'icon-subdued'
| 'icon-success'
| 'icon-warning'
| 'icon'
| 'interactive-critical-disabled'
| 'interactive-critical-hovered'
| 'interactive-critical-pressed'
| 'interactive-critical'
| 'interactive-disabled'
| 'interactive-hovered'
| 'interactive-on-dark'
| 'interactive-pressed-on-dark'
| 'interactive-pressed'
| 'interactive'
| 'shadow-color-picker-dragger'
| 'shadow-color-picker'
| 'text'
| 'text-critical'
| 'text-disabled'
| 'text-highlight'
| 'text-on-critical'
| 'text-on-dark'
| 'text-on-interactive'
| 'text-on-primary'
| 'text-primary-hovered'
| 'text-primary-pressed'
| 'text-primary'
| 'text-subdued-on-dark'
| 'text-subdued'
| 'text-success'
| 'text-warning';

export type ColorsTokenGroup = {
[TokenName in ColorsTokenName]: string;
};

export const colors: {
[TokenName in ColorsTokenName]: MetadataProperties;
} = {
export const colors = {
background: {
value: 'rgba(246, 246, 247, 1)',
description:
Expand Down
8 changes: 1 addition & 7 deletions polaris-for-vscode/src/server.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,7 @@ import type {
} from 'vscode-languageserver/node';
import {TextDocument} from 'vscode-languageserver-textdocument';

const excludedTokenGroupNames = [
'colors',
'depth',
'legacy',
'spacing',
'shape',
] as const;
const excludedTokenGroupNames = [] as const;

type ExcludedTokenGroupName = typeof excludedTokenGroupNames[number];

Expand Down
Loading

0 comments on commit 37f3e2e

Please sign in to comment.