Release v15.0.0

.storybook/Theme.ts

@@ -0,0 +1,43 @@
+import { create } from '@storybook/theming/create';
+
+// Docs: https://storybook.js.org/docs/7.6/configure/theming
+// Keys from https://github.com/storybookjs/storybook/blob/next/code/lib/theming/src/themes/light.ts
+export default create({
+  base: 'light',
+  brandTitle: 'Education Design System',
+  brandUrl: 'https://github.com/chanzuckerberg/edu-design-system',
+  // brandImage: 'https://storybook.js.org/images/placeholders/350x150.png',
+  brandTarget: '_blank',
+
+  // UI Fonts
+  fontBase: '"Graphik", sans-serif',
+  fontCode: '"Consolas", monospace',
+
+  // Primary scale colors
+  // colorPrimary: '#254EAC', // TODO not sure where this applies : eds-color-blue-650
+  colorSecondary: '#6C6967', // Selection and other colors : color-neutral-550
+
+  // App Chrome
+  appBg: '#FDF9F8', // Sidebar : color-neutral-025
+  appContentBg: '#FFFFFF', // Main documentation container : eds-color-white
+  appPreviewBg: '#FFFFFF', // Story Preview container : eds-color-white
+  appBorderColor: '#EEE7E4', // neutral-100
+  appBorderRadius: 0, //
+
+  // Text Colors
+  textColor: '#212121', // NOTE: zeroheight's default color
+  textInverseColor: '#FFFFFF', // text-utility-inverse
+
+  // Toolbar default and active colors
+  barTextColor: '#FFFFFF', // eds-color-white
+  barSelectedColor: '#FFFFFF', // eds-color-white
+  barBg: '#0F2163', // Content panel bar : color-blue-850
+
+  // Form Colors
+  buttonBg: '#FFFFFF', // eds-color-white
+  buttonBorder: '#0F2163', // color-background-utility-interactive-high-emphasis
+  inputBg: '#FFFFFF',
+  inputBorder: '#6C6967', // color-border-utility-default-medium-emphasis
+  inputTextColor: '#0F2163', // color-text-utility-default-primary
+  inputBorderRadius: 2, // border-radius-sm
+});

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

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

.storybook/components/ColorList/ColorList.tsx

@@ -41,12 +41,10 @@ export const ColorList = (props: Props) => (
           <Table.Cell>{listItem.tailwindClass}</Table.Cell>
           <Table.Cell>{listItem.value}</Table.Cell>
           <Table.Cell>
-            <input
+            <div
               className={styles['color-list__input']}
               id={listItem.name}
-              readOnly
-              type="color"
-              value={listItem.value}
+              style={{ backgroundColor: listItem.value }}
             />
           </Table.Cell>
         </Table.Row>

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

@@ -15,10 +15,10 @@ export class Tier1Animation extends Component {
                 <Grid.Item key={listItem.name}>
                   <TokenSpecimen
                     inlineStyles={{
-                      transitionDuration: `var(${listItem.name})`,
+                      transitionDuration: `calc(var(${listItem.name}) * 1s)`,
                     }}
                     name={listItem.name}
-                    value={listItem.value}
+                    value={listItem.value + 's'}
                     variant="animation-fade"
                   />
                 </Grid.Item>
@@ -34,10 +34,10 @@ export class Tier1Animation extends Component {
                 <Grid.Item key={listItem.name}>
                   <TokenSpecimen
                     inlineStyles={{
-                      transitionDuration: `var(${listItem.name})`,
+                      transitionDuration: `calc(var(${listItem.name}) * 1s)`,
                     }}
                     name={listItem.name}
-                    value={listItem.value}
+                    value={listItem.value + 's'}
                     variant="animation-move"
                   />
                 </Grid.Item>
@@ -53,7 +53,7 @@ export class Tier1Animation extends Component {
                 <Grid.Item key={listItem.name}>
                   <TokenSpecimen
                     inlineStyles={{
-                      transitionTimingFunction: `var(${listItem.name})`,
+                      transitionTimingFunction: `calc(var(${listItem.name}) * 1s)`,
                     }}
                     name={listItem.name}
                     value={listItem.value}

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

@@ -6,6 +6,7 @@ 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">
@@ -16,12 +17,12 @@ export class Tier1Borders extends Component {
                   <TokenSpecimen
                     inlineStyles={{
                       backgroundColor: 'transparent',
-                      borderWidth: `var(${listItem.name})`,
+                      borderWidth: `calc(var(${listItem.name}) * 1px)`,
                       borderStyle: 'solid',
                       borderColor: 'black',
                     }}
                     name={listItem.name}
-                    value={listItem.value}
+                    value={listItem.value + 'px'}
                   />
                 </Grid.Item>
               );
@@ -32,6 +33,7 @@ export class Tier1Borders extends Component {
         <Section title="Border Radius">
           <Grid>
             {filterTokens(`eds-border-radius`).map(function (listItem) {
+              const unit = listItem.name.indexOf('round') > 0 ? '%' : 'px';
               return (
                 <Grid.Item key={listItem.name}>
                   <TokenSpecimen
@@ -40,10 +42,10 @@ export class Tier1Borders extends Component {
                       borderWidth: '2px',
                       borderStyle: 'solid',
                       borderColor: 'black',
-                      borderRadius: `var(${listItem.name})`,
+                      borderRadius: `calc(var(${listItem.name}) * 1${unit})`,
                     }}
                     name={listItem.name}
-                    value={listItem.value}
+                    value={listItem.value + unit}
                   />
                 </Grid.Item>
               );

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

@@ -12,23 +12,59 @@ export const Tier1Colors = () => {
       figmaToken:
         figmaTokenHeader + '/' + name.slice(name.lastIndexOf('-') + 1),
     }));
+
+  // 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]);
+  });
   return (
     <div>
-      <Section title="Neutral Colors">
-        <ColorList listItems={getListItems('eds-color-neutral', 'neutral')} />
-      </Section>
-      <Section title="Brand Colors">
-        <ColorList listItems={getListItems('eds-color-brand', 'brand-grape')} />
-      </Section>
-      <Section className="flex flex-col gap-3" title="Other Colors">
-        <ColorList
-          listItems={getListItems('eds-color-other-orange', 'orange')}
-        />
-        <ColorList listItems={getListItems('eds-color-other-mint', 'mint')} />
-        <ColorList
-          listItems={getListItems('eds-color-other-yellow', 'yellow')}
-        />
-        <ColorList listItems={getListItems('eds-color-other-ruby', 'ruby')} />
+      <Section
+        description="These base colors are used in higher tier tokens and not linked for use via Tailwind"
+        title="Brand Red Colors"
+      >
+        <ColorList listItems={getListItems('eds-color-red', 'red')} />
+      </Section>
+      <Section title="Brand Orange Colors">
+        <ColorList listItems={getListItems('eds-color-orange', 'orange')} />
+      </Section>
+      <Section title="Brand Yellow Colors">
+        <ColorList listItems={getListItems('eds-color-yellow', 'yellow')} />
+      </Section>
+      <Section title="Brand Green Colors">
+        <ColorList listItems={getListItems('eds-color-green', 'green')} />
+      </Section>
+      <Section title="Brand Blue Colors">
+        <ColorList listItems={getListItems('eds-color-blue', 'blue')} />
+      </Section>
+      <Section title="Brand Purple Colors">
+        <ColorList listItems={getListItems('eds-color-purple', 'purple')} />
+      </Section>
+      <Section title="Brand Pink Colors">
+        <ColorList listItems={getListItems('eds-color-pink', 'pink')} />
+      </Section>
+      <Section title="Brand Neutral Colors">
+        <ColorList listItems={nonLegacyNeutralItems} />
       </Section>
     </div>
   );

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

@@ -7,47 +7,35 @@ import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 export class Tier1Sizes extends Component {
   render() {
     return (
-      <div>
-        <Section title="Base Grid Size">
-          <Grid>
-            {filterTokens('eds-size-base').map((listItem) => (
-              <Grid.Item key={listItem.name}>
-                <TokenSpecimen
-                  comment="Calculated from a multiple of the base font size"
-                  inlineStyles={{
-                    width: `var(${listItem.name})`,
-                    height: `var(${listItem.name})`,
-                    minHeight: '0',
-                  }}
-                  name={listItem.name}
-                  value={listItem.value}
-                />
-              </Grid.Item>
-            ))}
-          </Grid>
-        </Section>
-        <Section title="Grid Size">
-          <Grid>
-            {filterTokens(`eds-size`)
-              .filter((listItem) => !listItem.name.endsWith('base-unit'))
-              .map(function (listItem) {
-                return (
-                  <Grid.Item key={listItem.name}>
-                    <TokenSpecimen
-                      inlineStyles={{
-                        width: `var(${listItem.name})`,
-                        height: `var(${listItem.name})`,
-                        minHeight: '0',
-                      }}
-                      name={listItem.name}
-                      value={listItem.value}
-                    />
-                  </Grid.Item>
-                );
-              })}
-          </Grid>
-        </Section>
-      </div>
+      <Section
+        description="When using tailwind config, these sizes can be applied to any tailwind size utility class"
+        title="Grid Sizes"
+      >
+        <Grid>
+          {filterTokens(`eds-size`)
+            .filter((listItem) => !listItem.name.endsWith('base-unit'))
+            .map(function (listItem) {
+              return (
+                <Grid.Item key={listItem.name}>
+                  <TokenSpecimen
+                    comment={`Tailwind class: *-${
+                      listItem.name.split('--eds-')[1]
+                    }`}
+                    inlineStyles={{
+                      width: `calc(var(${listItem.name}) / 16 * 1rem)`,
+                      height: `calc(var(${listItem.name}) / 16 * 1rem)`,
+                      minHeight: '0',
+                    }}
+                    name={listItem.name}
+                    value={
+                      listItem.value + 'px' + ` (${listItem.value / 16}rem)`
+                    }
+                  />
+                </Grid.Item>
+              );
+            })}
+        </Grid>
+      </Section>
     );
   }
 }

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

@@ -2,7 +2,6 @@ import React from 'react';
 import { Tier1Animation } from './Animation';
 import { Tier1Borders } from './Borders';
 import { Tier1Colors } from './Colors';
-import { Tier1Layout } from './Layout';
 import { Tier1Shadows } from './Shadows';
 import { Tier1Sizes } from './Sizes';
 
@@ -22,6 +21,8 @@ export default {
   },
 };
 
+// TODO: Tokens to document: eds-color-opacity
+
 export const Colors = {
   render: () => <Tier1Colors />,
 };
@@ -38,10 +39,6 @@ export const Sizes = {
   render: () => <Tier1Sizes />,
 };
 
-export const Layout = {
-  render: () => <Tier1Layout />,
-};
-
 export const Shadows = {
   render: () => <Tier1Shadows />,
 };