Release v16.0.0

.storybook/Theme.ts

@@ -14,7 +14,7 @@ export default create({
   fontCode: '"Consolas", monospace',
 
   // Primary scale colors
-  // colorPrimary: '#254EAC', // TODO not sure where this applies : eds-color-blue-650
+  // colorPrimary: '#254EAC', // not sure where this applies : eds-color-blue-650
   colorSecondary: '#6C6967', // Selection and other colors : color-neutral-550
 
   // App Chrome

.storybook/components/ColorList/ColorList.module.css

@@ -1,30 +1,28 @@
 .color-list__label {
   width: fit-content;
-  padding: calc(var(--eds-size-half) / 16 * 1rem);
+  padding: calc(var(--eds-spacing-size-half) * 1px);
   border-radius: calc(var(--eds-theme-box-button-border-radius) * 1px);
 
-  font: var(--eds-theme-typography-label-md-subtle);
   color: rgb(235, 87, 87);
 
   background-color: var(--eds-theme-color-background-neutral-subtle);
 }
 
 .color-list__input {
   width: 100%;
-  height: 5rem;
-  border: var(--eds-theme-color-border-neutral-subtle) solid
-    calc(var(--eds-border-width-sm) * 1px);
-  outline: var(--eds-theme-color-border-neutral-strong) solid
-    calc(var(--eds-border-width-sm) * 1px);
+  height: calc(var(--eds-spacing-size-10) * 1px);
+  border: var(--eds-theme-color-border-neutral-subtle) solid calc(var(--eds-border-width-sm) * 1px);
+  outline: var(--eds-theme-color-border-neutral-strong) solid calc(var(--eds-border-width-sm) * 1px);
 }
 
 .color-list__input::-webkit-color-swatch {
   border-color: transparent;
 }
+
 .color-list__input::-webkit-color-swatch-wrapper {
   padding: 0;
 }
 
 .color-list__input::-moz-color-swatch {
   border-color: transparent;
-}
+}

.storybook/components/ColorList/ColorList.tsx

@@ -17,9 +17,11 @@ export const ColorList = (props: Props) => (
   <Table>
     <Table.Header>
       <Table.Row variant="header">
-        <Table.HeaderCell className="w-72">CSS Variable</Table.HeaderCell>
-        <Table.HeaderCell className="w-40">Figma Token Name</Table.HeaderCell>
-        <Table.HeaderCell className="w-72">
+        <Table.HeaderCell className="w-[288px]">CSS Variable</Table.HeaderCell>
+        <Table.HeaderCell className="w-[160px]">
+          Figma Token Name
+        </Table.HeaderCell>
+        <Table.HeaderCell className="w-[288px]">
           Tailwind Class Name(s)
         </Table.HeaderCell>
         <Table.HeaderCell className="w-40">Raw Value</Table.HeaderCell>

.storybook/components/DesignTokens/DesignTokens.css

@@ -1,17 +1,17 @@
 .sg-colors {
   display: grid;
-  grid-gap: 1rem;
-  /* grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); */
+  grid-gap: calc(var(--eds-spacing-size-2) * 1px);
+
   list-style: none;
   margin: 0;
   padding: 0;
 }
 .sg-colors li {
   -webkit-box-flex: 1;
   flex: auto;
-  padding: 0.3em;
-  margin: 0 0.5em 0.5em 0;
-  min-width: 5em;
+  padding: calc(var(--eds-spacing-size-1) * 1px);
+  margin: 0 calc(var(--eds-spacing-size-1) * 1px) calc(var(--eds-spacing-size-1) * 1px) 0;
+  min-width: calc(var(--eds-spacing-size-10) * 1px);
   border: 1px solid #ddd;
   border-radius: 8px;
 }
@@ -26,7 +26,6 @@
 }
 
 .sg-border-width-demo-box {
-  font-size: 14px;
   background: white;
   text-align: center;
   width: 100%;
@@ -56,19 +55,18 @@
 
 .sg-base-unit-demo-box {
   display: block;
-  font-size: 14px;
   border: 1px solid #000000;
 }
 
 .sg-shadow-demo-box {
   border: 1px solid #000000;
-  margin-bottom: 2rem;
+  margin-bottom: calc(var(--eds-spacing-size-4) * 1px);
   text-align: center;
-  padding: 1rem;
+  padding: calc(var(--eds-spacing-size-2) * 1px);
 }
 
 .sg-animation-demo-box {
-  height: 4em;
+  height: calc(var(--eds-spacing-size-8) * 1px);
   background-color: #000000;
   cursor: pointer;
 }

.storybook/components/DesignTokens/Tier1/Animation.jsx

@@ -45,25 +45,6 @@ export class Tier1Animation extends Component {
             })}
           </Grid>
         </Section>
-
-        <Section title="Animation Timing Function">
-          <Grid>
-            {filterTokens(`eds-anim-ease`).map(function (listItem) {
-              return (
-                <Grid.Item key={listItem.name}>
-                  <TokenSpecimen
-                    inlineStyles={{
-                      transitionTimingFunction: `calc(var(${listItem.name}) * 1s)`,
-                    }}
-                    name={listItem.name}
-                    value={listItem.value}
-                    variant="animation-fade"
-                  />
-                </Grid.Item>
-              );
-            })}
-          </Grid>
-        </Section>
       </div>
     );
   }

.storybook/components/DesignTokens/Tier1/Borders.jsx

@@ -6,7 +6,6 @@ import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 
 export class Tier1Borders extends Component {
   render() {
-    // TODO: what are the width tokens to document?
     return (
       <div>
         <Section title="Border Width">

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

@@ -14,29 +14,7 @@ export const Tier1Colors = () => {
     }));
 
   // filter down to the neutral tokens which were introduced or redefined in the new brand
-  const nonLegacyNeutralItems = getListItems(
-    'eds-color-neutral',
-    'neutral',
-  ).filter((item) => {
-    // TODO: remove this filter once the deprecated neutral tokens are deleted
-    return [
-      '025',
-      '050',
-      '100',
-      '150',
-      '200',
-      '250',
-      '350',
-      '450',
-      '550',
-      '650',
-      '750',
-      '800',
-      '850',
-      '900',
-      '950',
-    ].includes(item.figmaToken.split('/')[1]);
-  });
+  const nonLegacyNeutralItems = getListItems('eds-color-neutral', 'neutral');
   return (
     <div>
       <Section

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

@@ -12,7 +12,7 @@ export class Tier1Sizes extends Component {
         title="Grid Sizes"
       >
         <Grid>
-          {filterTokens(`eds-size`)
+          {filterTokens(`eds-spacing-size`)
             .filter((listItem) => !listItem.name.endsWith('base-unit'))
             .map(function (listItem) {
               return (
@@ -22,14 +22,12 @@ export class Tier1Sizes extends Component {
                       listItem.name.split('--eds-')[1]
                     }`}
                     inlineStyles={{
-                      width: `calc(var(${listItem.name}) / 16 * 1rem)`,
-                      height: `calc(var(${listItem.name}) / 16 * 1rem)`,
+                      width: `calc(var(${listItem.name}) * 1px)`,
+                      height: `calc(var(${listItem.name}) * 1px)`,
                       minHeight: '0',
                     }}
                     name={listItem.name}
-                    value={
-                      listItem.value + 'px' + ` (${listItem.value / 16}rem)`
-                    }
+                    value={listItem.value + 'px'}
                   />
                 </Grid.Item>
               );

.storybook/components/DesignTokens/Tier1/Tier1Tokens.stories.jsx

@@ -21,8 +21,6 @@ export default {
   },
 };
 
-// TODO: Tokens to document: eds-color-opacity
-
 export const Colors = {
   render: () => <Tier1Colors />,
 };