Merge pull request #1823 from chanzuckerberg/release-v13.8.1

### [13.8.1](v13.8.0...v13.8.1) (2024-01-04)

[Storybook](https://61313967cde49b003ae2a860-zhfjhciiyv.chromatic.com/)

- Dependency updates
- Token refactoring

Author: booc0mtaco

.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:
 

.storybook/data/tokens.json

@@ -2,6 +2,8 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [13.8.1](https://github.com/chanzuckerberg/edu-design-system/compare/v13.8.0...v13.8.1) (2024-01-04)
+
 ## [13.8.0](https://github.com/chanzuckerberg/edu-design-system/compare/v13.7.1...v13.8.0) (2023-12-06)
 
 

CHANGELOG.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 */
 }
 ```
 

README.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.

docs/CONTRIBUTING.md

@@ -1,6 +1,6 @@
 {
   "name": "@chanzuckerberg/eds",
-  "version": "13.8.0",
+  "version": "13.8.1",
   "description": "The React-powered design system library for Chan Zuckerberg Initiative education web applications",
   "author": "CZI <[email protected]>",
   "homepage": "https://github.com/chanzuckerberg/edu-design-system",
@@ -102,11 +102,11 @@
     "react-popper": "^2.3.0",
     "react-portal": "^4.2.2",
     "react-uid": "^2.3.3",
-    "style-dictionary": "^3.9.0",
+    "style-dictionary": "^3.9.1",
     "svg4everybody": "^2.1.9"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.23.5",
+    "@babel/preset-env": "^7.23.6",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
     "@chanzuckerberg/axe-storybook-testing": "^7.1.3",
@@ -118,33 +118,33 @@
     "@commitlint/cli": "^18.4.3",
     "@commitlint/config-conventional": "^18.4.3",
     "@geometricpanda/storybook-addon-badges": "^2.0.0",
-    "@omlet/cli": "^1.0.1-beta.39",
+    "@omlet/cli": "^1.1.2",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.5",
     "@size-limit/file": "^8.2.6",
-    "@storybook/addon-a11y": "^7.6.3",
-    "@storybook/addon-essentials": "^7.6.3",
-    "@storybook/addon-interactions": "^7.6.3",
-    "@storybook/addon-links": "^7.6.3",
+    "@storybook/addon-a11y": "^7.6.6",
+    "@storybook/addon-essentials": "^7.6.6",
+    "@storybook/addon-interactions": "^7.6.6",
+    "@storybook/addon-links": "^7.6.6",
     "@storybook/addon-styling": "^1.3.7",
-    "@storybook/react": "^7.6.3",
-    "@storybook/react-webpack5": "^7.6.3",
+    "@storybook/react": "^7.6.6",
+    "@storybook/react-webpack5": "^7.6.6",
     "@storybook/testing-library": "^0.2.2",
     "@storybook/testing-react": "^2.0.1",
     "@testing-library/jest-dom": "^6.1.5",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.1",
-    "@types/jest": "^29.5.10",
-    "@types/node": "^20.10.1",
-    "@types/react": "^18.2.39",
+    "@types/jest": "^29.5.11",
+    "@types/node": "^20.10.5",
+    "@types/react": "^18.2.45",
     "@types/react-beautiful-dnd": "^13.1.7",
-    "@types/react-dom": "^18.2.17",
-    "@types/react-portal": "^4.0.6",
-    "axe-core": "4.8.2",
+    "@types/react-dom": "^18.2.18",
+    "@types/react-portal": "^4.0.7",
+    "axe-core": "4.8.3",
     "chromatic": "^9.1.0",
     "codecov": "^3.8.3",
     "copyfiles": "^2.4.1",
-    "eslint": "^8.54.0",
+    "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-jest": "^27.6.0",
     "eslint-plugin-prettier": "^5.0.1",
@@ -157,7 +157,7 @@
     "jest-preset-stylelint": "^6.3.2",
     "lint-staged": "^13.3.0",
     "plop": "^4.0.0",
-    "postcss": "^8.4.31",
+    "postcss": "^8.4.32",
     "postcss-cli": "^10.1.0",
     "postcss-import": "^15.1.0",
     "postcss-mixins": "^9.0.4",
@@ -167,15 +167,15 @@
     "prettier-plugin-tailwindcss": "^0.5.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rollup": "^4.6.1",
+    "rollup": "^4.9.1",
     "rollup-plugin-postcss": "^4.0.2",
     "size-limit": "^8.2.6",
     "standard-version": "^9.5.0",
-    "storybook": "^7.6.3",
-    "style-dictionary": "^3.9.0",
+    "storybook": "^7.6.6",
+    "style-dictionary": "^3.9.1",
     "stylelint": "^15.11.0",
     "stylelint-config-recommended": "^13.0.0",
-    "tailwindcss": "^3.3.5",
+    "tailwindcss": "^3.4.0",
     "ts-jest": "^29.1.1",
     "typescript": "^5.2.2"
   },

package.json

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

src/components/Avatar/Avatar.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/Badge/Badge.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/DragDrop/DragDrop.module.css

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

src/components/Drawer/Drawer.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/Layout/Layout.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/LayoutContainer/LayoutContainer.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/LayoutLinelengthContainer/LayoutLinelengthContainer.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/Modal/Modal.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/NumberIcon/NumberIcon.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/PopoverContainer/PopoverContainer.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/PopoverListItem/PopoverListItem.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/Select/Select.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/Skeleton/Skeleton.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/TimelineNav/TimelineNav.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);