refactor(tokens): adjust tokens to be import/export compatible (#1819)

- update token file usages in storybook
- add in missing tokens attributes to close needed gaps on import
- updates to usages NOT resulting in visual changes
- add "group" values to exportable tokens to mark types
- standardize deprecation comments
- remove usages of tokens matching the named value

.storybook/components/DesignTokens/Tier1/Colors.tsx

@@ -29,9 +29,6 @@ export const Tier1Colors = () => {
           listItems={getListItems('eds-color-other-yellow', 'yellow')}
         />
         <ColorList listItems={getListItems('eds-color-other-ruby', 'ruby')} />
-        <ColorList
-          listItems={getListItems('eds-color-other-lemon', 'supporting')}
-        />
       </Section>
     </div>
   );

.storybook/components/DesignTokens/Tier1/Sizes.jsx

@@ -12,7 +12,7 @@ export class Tier1Sizes extends Component {
             {filterTokens('eds-size-base').map((listItem) => (
               <Grid.Item key={listItem.name}>
                 <TokenSpecimen
-                  comment="Calculated from a multiple of the base font size --eds-font-size-base"
+                  comment="Calculated from a multiple of the base font size"
                   inlineStyles={{
                     width: `var(${listItem.name})`,
                     height: `var(${listItem.name})`,

.storybook/components/DesignTokens/Tier3/TypographyComponents.stories.tsx

@@ -3,12 +3,13 @@ import { at, capitalize, forEach, merge } from 'lodash';
 
 import React from 'react';
 import { Grid, Section } from '../../../../src';
-import breadcrumb from '../../../../src/design-tokens/tier-3-component/breadcrumb.json';
-import button from '../../../../src/design-tokens/tier-3-component/buttons.json';
-import form from '../../../../src/design-tokens/tier-3-component/forms.json';
-import link from '../../../../src/design-tokens/tier-3-component/link.json';
-import tab from '../../../../src/design-tokens/tier-3-component/tab.json';
-import tag from '../../../../src/design-tokens/tier-3-component/tag.json';
+import breadcrumb from '../../../../src/design-tokens/tier-3-component/breadcrumb-typography.json';
+import button from '../../../../src/design-tokens/tier-3-component/buttons-typography.json';
+import form from '../../../../src/design-tokens/tier-3-component/forms-typography.json';
+import link from '../../../../src/design-tokens/tier-3-component/link-typography.json';
+import tab from '../../../../src/design-tokens/tier-3-component/tab-typography.json';
+import tag from '../../../../src/design-tokens/tier-3-component/tag-typography.json';
+
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore importing of a legacy utility file results in some 'any's, which is acceptable for this docs page
 import flatten from '../../../util/flattenToken';

.storybook/components/Docs/Guidelines/Typography.stories.mdx

@@ -6,16 +6,15 @@ import { Canvas, Meta } from '@storybook/blocks';
 
 Typography in EDS follows [the same structure as design tokens](./?path=/story/documentation-guidelines-tokens--page), with the exception that typography operates as a _cluster_ of typography-specific style properties rather than a single style property.
 
-## Tier 1: Typography values
+## Basics: Typography values
 
 These token values are _never to be used_ directly by components; these token values are assembled into typography presets.
 
-Values include:
+Tokens include those prefixed by:
 
-- `eds-font-family`
-- `eds-font-size-XX`
-- `eds-font-weight-XX`
-- `eds-letter-spacing-XX`
+- `eds-font-family-*`
+- `eds-font-weight-*`
+- `eds-letter-spacing-*`
 
 ## Tier 1: Typography presets
 
@@ -52,7 +51,7 @@ When defining a new usage, you can refer to the variable by name
 
 Tier 2 typography values take the typography presets defined at the Tier 2 level and map them to a semantic usage value like so:
 
-Similar to the example above, you can use the token names in components and other code, or to define higher-tier tokens.
+Similar to the example above, you can use the token names in components and other code, make use of the presets using the `Heading` or `Text` components, or to define higher-tier tokens.
 
 These semantic values are then included in each component's style file:
 

README.md

@@ -30,7 +30,7 @@ We also surface an `--eds-font-size-base` property to set your base `rem` font s
 
 ```css
 html {
-  font-size: var(--eds-font-size-base); /* Resets the default pixel-to-rem ratio */
+  font-size: var(--eds-font-size-base); /* Sets the default pixel-to-rem ratio */
 }
 ```
 

docs/CONTRIBUTING.md

@@ -82,15 +82,19 @@ For example, tokens in figma have a name in the format 'Category/token-name', so
 When making changes to existing tokens, we want to be mindful not to cause regressions for consumers. We use the following process for updating existing tokens:
 
 1. Add in the new token to the corresponding JSON file in src/design-tokens
-2. For the new token value, use a `var()` reference, pointing to the old token name
+2. For the new token value, use a [style dictionary][sd] reference, pointing to the old token name (this will generate a css variable when processing CSS as a target).
 3. Also add a comment which notes the old token is deprecated, and which token is the replacement to use.
 
 For example, if we had a token `--eds-theme-color-background-old-name` which we want to change to `---eds-theme-color-background-new-name`, we would set the value of the new token to `var(--eds-theme-color-background-old-name)`. We can also add the following key to the JSON file.
 
+[sd]: https://amzn.github.io/style-dictionary/#/version_3?id=output-references
+
 ```json
-"comment": "@deprecated This token is deprecated. Please use eds-theme-color-new-name instead."
+"comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS. Please use eds-theme-color-new-name instead."
 ```
 
+If there is a plan to simply remove a token due to some refactoring, you can remove the suffix suggesting the token to remove at your discretion.
+
 This has the following benefits:
 
 - Users who have added a theme value to `--eds-theme-color-background-old-name` will not have their theme value break upon update.

src/components/Avatar/Avatar.module.css

@@ -80,7 +80,7 @@
 }
 
 .avatar--circle {
-  border-radius: var(--eds-border-radius-round);
+  border-radius: var(--eds-border-radius-full);
 }
 
 .avatar__image {

src/components/Badge/Badge.module.css

@@ -22,7 +22,7 @@
    */
   --badge-height: calc(var(--eds-size-2-and-half) + 2 * var(--eds-border-width-sm));
 
-  z-index: var(--eds-z-index-100);
+  z-index: 100;
 
   display: flex;
   align-items: center;

src/components/DragDrop/DragDrop.module.css

@@ -27,7 +27,7 @@
       top: 0;
       left: 0;
       width: var(--eds-size-4);
-      z-index: var(--eds-z-index-100);
+      z-index: 100;
     }
   }
 
@@ -52,7 +52,7 @@
       top: 0;
       right: 0;
       width: var(--eds-size-4);
-      z-index: var(--eds-z-index-100);
+      z-index: 100;
     }
   }
 }
@@ -180,7 +180,7 @@
   align-items: center;
   height: calc(100% - 2px);
   padding: var(--eds-size-1);
-  z-index: var(--eds-z-index-400);
+  z-index: 400;
   border-radius: var(--eds-border-radius-lg);
   background: var(--eds-theme-color-background-neutral-default);
   transition: opacity var(--eds-anim-fade-quick) var(--eds-anim-ease);

src/components/Drawer/Drawer.module.css

@@ -27,7 +27,7 @@
  */
 .drawer__container--is-active {
   visibility: visible;
-  z-index: var(--eds-z-index-400);
+  z-index: 400;
 }
 
 /**

src/components/Layout/Layout.module.css

@@ -84,8 +84,8 @@
     top: 0;
     left: 0;
     height: 100vh;
-    width: var(--eds-l-sidebar-width);
-    z-index: var(--eds-z-index-500);
+    width: 13.5rem;
+    z-index: 500;
   }
 
   /**

src/components/LayoutContainer/LayoutContainer.module.css

@@ -12,7 +12,7 @@
   * Uses calc to account for the addition of padding around the layout container
   * to ensure content doesn't butt up against viewport edge.
   */
-  max-width: calc(var(--eds-l-max-width) + var(--eds-size-6));
+  max-width: calc(71.25rem + var(--eds-size-6));
   margin-left: auto;
   margin-right: auto;
   padding-left: var(--eds-size-2);

src/components/LayoutLinelengthContainer/LayoutLinelengthContainer.module.css

@@ -7,5 +7,5 @@
  */
 .layout-linelength-container {
   /*  Caps the length of an excerpt of text to be easily readable. */
-  max-width: var(--eds-l-linelength-width); 
+  max-width: 36rem; 
 }

src/components/Modal/Modal.module.css

@@ -204,7 +204,7 @@
   border-bottom-left-radius: var(--eds-border-radius-lg);
   border-bottom-right-radius: var(--eds-border-radius-lg);
 
-  z-index: var(--eds-z-index-100);
+  z-index: 100;
 }
 
 /**

src/components/NumberIcon/NumberIcon.module.css

@@ -18,7 +18,7 @@
   /* The circle part of the icon, made with borders. */
   border: var(--eds-border-width-sm) solid;
   border-color: inherit;
-  border-radius: var(--eds-border-radius-round);
+  border-radius: var(--eds-border-radius-full);
 }
 
 .number-icon--incomplete {

src/components/PopoverContainer/PopoverContainer.module.css

@@ -12,7 +12,7 @@
   overflow: auto;
   box-shadow: var(--eds-box-shadow-md);
   background-color: var(--eds-theme-color-background-neutral-default);
-  z-index: var(--eds-z-index-100);
+  z-index: 100;
 
   &:focus-visible {
     @mixin focus;

src/components/PopoverListItem/PopoverListItem.module.css

@@ -7,7 +7,7 @@
  */
 .popover-list-item {
   display: flex;
-  font-size: var(--eds-font-size-14);
+  font-size: 0.875rem;
   padding: var(--eds-size-1) var(--eds-size-2);
   background-color: var(--eds-theme-color-form-background);
   cursor: pointer;

src/components/Select/Select.module.css

@@ -43,7 +43,7 @@
  * The container for the individual select options. 
  */
 .select__options {
-  z-index: var(--eds-z-index-100);
+  z-index: 100;
 }
 
 .select__option-text {

src/components/Skeleton/Skeleton.module.css

@@ -30,7 +30,7 @@
 }
 
 .skeleton.skeleton-circle {
-  border-radius: var(--eds-border-radius-round);
+  border-radius: var(--eds-border-radius-full);
 }
 
 @media screen and (prefers-reduced-motion: reduce) {

src/components/TimelineNav/TimelineNav.module.css

@@ -79,7 +79,7 @@
   @media all and (min-width: $eds-bp-lg) {
     display: block;
     position: static;
-    z-index: var(--eds-z-index-0);
+    z-index: 0;
     flex: 1;
     width: 100%;
     height: auto;
@@ -93,7 +93,7 @@
 
 .timeline-nav__body.eds-is-active {
   position: static;
-  z-index: var(--eds-z-index-0);
+  z-index: 0;
   width: 100%;
   height: 100%;
   overflow: visible;
@@ -264,7 +264,7 @@
   /* Used on list items using number variant; provides a cosmetic cicular border */
   border: 1px solid var(--eds-theme-color-border-neutral-subtle);
   margin-right: 9px;
-  font-size: var(--eds-font-size-12);
+  font-size: 0.75rem;
   margin-left: -4px;
   background: var(--eds-theme-color-background-neutral-default);
   /* Make the border dark when li is active */
@@ -277,7 +277,7 @@
  */
 .timeline-nav__link-left {
   position: relative;
-  z-index: var(--eds-z-index-100);
+  z-index: 100;
 }
 
 /**

src/components/Toggle/Toggle.module.css

@@ -95,7 +95,7 @@
 
   /* The transparent border is used to support Windows high contrast mode and reduce potential jiggling with adding / removing borders */
   border: var(--eds-theme-border-width) solid transparent;
-  border-radius: var(--eds-border-radius-round);
+  border-radius: var(--eds-border-radius-full);
 
   background-color: var(--eds-theme-color-toggle-thumb);
 

src/design-tokens/tier-1-definitions/animation.json

@@ -21,7 +21,8 @@
         }
       },
       "ease": {
-        "value": "ease"
+        "value": "ease",
+        "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
       }
     }
   }

src/design-tokens/tier-1-definitions/borders.json

@@ -16,6 +16,9 @@
         }
       },
       "radius": {
+        "none": {
+          "value": "0px"
+        },
         "md": {
           "value": "4px"
         },
@@ -26,7 +29,8 @@
           "value": "20px"
         },
         "round": {
-          "value": "50%"
+          "value": "50%",
+          "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
         },
         "full": {
           "value": "9999px"