Merge pull request #327 from hashicorp/remove-deprecated-tokens

Remove deprecated design tokens for old semantic colors

.changeset/lucky-knives-fold.md

@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-tokens": patch
+---
+
+removed deprecated design tokens for old semantic colors

packages/components/tests/dummy/app/styles/pages/db-tokens.scss

@@ -120,7 +120,3 @@
  @include dummyFontFamily();
  font-size: 0.9em;
 }
-
-.dummy-token__details-colors-notice {
- margin: 20px 0;
-}

packages/components/tests/dummy/app/templates/foundations/tokens.hbs

@@ -49,19 +49,6 @@
 
  {{#each-in this.groupedTokens as |category categoryList|}}
  <h4 class="dummy-h4">{{capitalize category}}</h4>
- {{#if (eq category "color")}}
- <div class="dummy-token__details-colors-notice">
- <p class="dummy-paragraph">🚨 IMPORTANT 🚨</p>
- <p class="dummy-paragraph">
- We have recently updated the "semantic" color tokens (ie.
- <code class="dummy-code">--token-color-success-foreground-primary</code>
- has been renamed
- <code class="dummy-code">--token-color-foreground-success</code>). The old design tokens are still available
- but are deprecated (they are grayed out in the list below): check what is the new color token to use as
- alternative, and if none is available please contact the design system team.
- </p>
- </div>
- {{/if}}
  <div class="dummy-tokens-list">
  {{#each categoryList as |token|}}
  <DummyToken @token={{token}} />

packages/tokens/dist/devdot/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 31 Mar 2022 09:28:32 GMT
+ * Generated on Mon, 30 May 2022 11:19:24 GMT
  */
 
 :root {
@@ -46,61 +46,6 @@
  --token-color-palette-alpha-300: #3b3d4566;
  --token-color-palette-alpha-200: #656a7633;
  --token-color-palette-alpha-100: #656a761a;
- --token-color-action-foreground-primary: #1060ff; /* deprecated: replace with 'color-foreground-action' */
- --token-color-action-foreground-on-faint: #0c56e9; /* deprecated: please speak with the HDS team to decide which color to use as alternative' */
- --token-color-action-foreground-high-contrast: #1c345f; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
- --token-color-action-background-primary: #1060ff; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
- --token-color-action-background-hover: #0c56e9; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
- --token-color-action-background-active: #0046d1; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
- --token-color-action-background-faint: #f2f8ff; /* deprecated: replace with 'color-surface-action' */
- --token-color-action-border-primary: #1060ff; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
- --token-color-action-border-on-primary: #0c56e9; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
- --token-color-action-border-on-hover: #0046d1; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
- --token-color-action-border-on-faint: #cce3fe; /* deprecated: replace with 'color-border-action' */
- --token-color-highlight-foreground-primary: #a737ff; /* deprecated: replace with 'color-foreground-highlight' */
- --token-color-highlight-foreground-on-faint: #911ced; /* deprecated: replace with 'color-foreground-highlight-on-surface' */
- --token-color-highlight-foreground-high-contrast: #42215b; /* deprecated: replace with 'color-highlight-high-contrast' */
- --token-color-highlight-background-primary: #a737ff; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
- --token-color-highlight-background-hover: #911ced; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
- --token-color-highlight-background-active: #7b00db; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
- --token-color-highlight-background-faint: #f9f2ff; /* deprecated: replace with 'color-surface-highlight' */
- --token-color-highlight-border-primary: #a737ff; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
- --token-color-highlight-border-on-primary: #911ced; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
- --token-color-highlight-border-on-hover: #7b00db; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
- --token-color-highlight-border-on-faint: #ead2fe; /* deprecated: replace with 'color-border-highlight' */
- --token-color-success-foreground-primary: #008a22; /* deprecated: replace with 'color-foreground-success' */
- --token-color-success-foreground-on-faint: #00781e; /* deprecated: replace with 'color-foreground-success-on-surface' */
- --token-color-success-foreground-high-contrast: #054220; /* deprecated: replace with 'color-foreground-success-high-contrast' */
- --token-color-success-background-primary: #008a22; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
- --token-color-success-background-hover: #00781e; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
- --token-color-success-background-active: #006619; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
- --token-color-success-background-faint: #f2fbf6; /* deprecated: replace with 'color-surface-success' */
- --token-color-success-border-primary: #008a22; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
- --token-color-success-border-on-primary: #00781e; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
- --token-color-success-border-on-hover: #006619; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
- --token-color-success-border-on-faint: #cceeda; /* deprecated: replace with 'color-border-success' */
- --token-color-warning-foreground-primary: #bb5a00; /* deprecated: replace with 'color-foreground-warning' */
- --token-color-warning-foreground-on-faint: #9e4b00; /* deprecated: replace with 'color-foreground-warning-on-surface' */
- --token-color-warning-foreground-high-contrast: #542800; /* deprecated: replace with 'color-foreground-warning-high-contrast' */
- --token-color-warning-background-primary: #bb5a00; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
- --token-color-warning-background-hover: #9e4b00; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
- --token-color-warning-background-active: #803d00; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
- --token-color-warning-background-faint: #fff9e8; /* deprecated: replace with 'color-surface-warning' */
- --token-color-warning-border-primary: #bb5a00; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
- --token-color-warning-border-on-primary: #9e4b00; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
- --token-color-warning-border-on-hover: #803d00; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
- --token-color-warning-border-on-faint: #fbeabf; /* deprecated: replace with 'color-border-warning' */
- --token-color-critical-foreground-primary: #e52228; /* deprecated: replace with 'color-foreground-critical' */
- --token-color-critical-foreground-on-faint: #c00005; /* deprecated: replace with 'color-foreground-critical-on-surface' */
- --token-color-critical-foreground-high-contrast: #51130a; /* deprecated: replace with 'color-foreground-critical-high-contrast' */
- --token-color-critical-background-primary: #e52228; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
- --token-color-critical-background-hover: #c00005; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
- --token-color-critical-background-active: #940004; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
- --token-color-critical-background-faint: #fff5f5; /* deprecated: replace with 'color-surface-critical' */
- --token-color-critical-border-primary: #e52228; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
- --token-color-critical-border-on-primary: #c00005; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
- --token-color-critical-border-on-hover: #940004; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
- --token-color-critical-border-on-faint: #fbd4d4; /* deprecated: replace with 'color-border-critical' */
  --token-color-border-primary: #656a7633;
  --token-color-border-faint: #656a761a;
  --token-color-border-strong: #3b3d4566;
@@ -135,15 +80,6 @@
  --token-color-foreground-critical-high-contrast: #51130a;
  --token-color-foreground-action-visited: #a737ff; /* This extra color is unique for the DevDot platform (the 'visited' state of a link is not differentiated in the products applications). */
  --token-color-foreground-action-visited-hover: #7b00db; /* This extra color is unique for the DevDot platform (the 'visited+hover' state of a link is not differentiated in the products applications). */
- --token-color-neutral-foreground-primary: #0c0c0e; /* deprecated: replace with 'token-color-foreground-strong' */
- --token-color-neutral-foreground-secondary: #3b3d45; /* deprecated: replace with 'token-color-foreground-primary' */
- --token-color-neutral-foreground-faint: #656a76; /* deprecated: replace with 'token-color-foreground-faint' */
- --token-color-neutral-background-primary: #ffffff; /* deprecated: replace with 'token-color-surface-primary' */
- --token-color-neutral-background-secondary: #fafafa; /* deprecated: replace with 'token-color-surface-faint' */
- --token-color-neutral-background-base: #ffffff; /* deprecated: replace with 'token-color-surface-primary' */
- --token-color-neutral-border-primary: #656a7633; /* deprecated: replace with 'token-color-border-primary' */
- --token-color-neutral-border-faint: #656a761a; /* deprecated: replace with 'token-color-border-faint' */
- --token-color-neutral-border-strong: #3b3d4566; /* deprecated: replace with 'token-color-border-strong' */
  --token-color-page-primary: #ffffff;
  --token-color-page-faint: #fafafa;
  --token-color-surface-primary: #ffffff;