feat: use Graphik as primary font family

.storybook/data/tokens.json

@@ -133,7 +133,7 @@
   "eds-size-half": "0.25rem",
   "eds-size-1-and-half": "0.75rem",
   "eds-size-2-and-half": "1.25rem",
-  "eds-font-family-primary": "'Arimo', sans-serif",
+  "eds-font-family-primary": "'Graphik', sans-serif",
   "eds-font-family-secondary": "'Open Sans', sans-serif",
   "eds-font-size-11": "0.688rem",
   "eds-font-size-12": "0.75rem",

.storybook/main.js

@@ -1,6 +1,14 @@
 const path = require('path');
 const SVGSpritemapPlugin = require('svg-spritemap-webpack-plugin');
 
+/**
+ * Although `--static-dir` is marked as deprecated. The The Chromatic CLI
+ * currently pulls the staticDir from the build script, but does not support
+ * the staticDirs configuration option.
+ *
+ * We should refrain from using the staticDirs option in this configuration until
+ * https://github.com/chromaui/chromatic-cli/issues/462 is resolved.
+ */
 module.exports = {
   stories: [
     './components/**/*.stories.@(js|jsx|ts|tsx)',

.storybook/preview.tsx

@@ -5,6 +5,7 @@ import '../src/design-tokens/css/base/media.css';
 
 // Import theme tokens
 import '../src/tokens-dist/css/variables.css';
+import '../src/design-tokens/tier-1-definitions/fonts.css';
 
 // Import storybook-specific CSS
 import './css/styleguide-only.css';

package.json

@@ -25,11 +25,12 @@
     "build:tokens": "rm -rf src/tokens-dist/ && node ./style-dictionary.config.js",
     "build:icons": "svg-sprite-generate -d src/icons/ -o src/icons/spritemap/spritemap.svg && yarn generate-icon-types",
     "build:js": "tsc --project tsconfig.build.json",
-    "build:storybook": "build-storybook -o storybook-static",
+    "build:storybook": "build-storybook -o storybook-static -s src/design-tokens/tier-1-definitions/fonts",
     "build:styles": "postcss \"src/components/**/*.css\" --dir lib/ --base src/ --verbose",
     "chromatic": "chromatic",
     "commit": "./node_modules/.bin/cz",
-    "copy-to-lib": "yarn copy-icons-to-lib && yarn copy-tokens-to-lib",
+    "copy-to-lib": "yarn copy-icons-to-lib && yarn copy-tokens-to-lib && yarn copy-fonts-to-lib",
+    "copy-fonts-to-lib": "copyfiles -u 3 src/design-tokens/tier-1-definitions/fonts.css src/design-tokens/tier-1-definitions/fonts/**/* lib/tokens",
     "copy-icons-to-lib": "copyfiles -u 1 src/icons/spritemap/**/* lib",
     "copy-tokens-to-lib": "copyfiles -u 2 src/tokens-dist/**/* lib/tokens",
     "create-component": "plop",
@@ -50,7 +51,7 @@
     "release:patch": "yarn build && standard-version --release-as patch",
     "release:alpha": "yarn build && standard-version --prerelease alpha",
     "start": "yarn build:tokens && yarn storybook",
-    "storybook": "start-storybook -p 9009 -s public",
+    "storybook": "start-storybook -p 9009 -s src/design-tokens/tier-1-definitions/fonts",
     "storybook:axe": "yarn run build:storybook && yarn run storybook:axeOnly",
     "storybook:axeOnly": "axe-storybook --build-dir storybook-static",
     "plop": "plop component",

src/components/CheckboxLabel/CheckboxLabel.module.css

@@ -1,6 +1,5 @@
 @import '../../design-tokens/mixins.css';
 
-
 /*------------------------------------*\
     #CHECKBOX LABEL
 \*------------------------------------*/
@@ -22,7 +21,7 @@
 }
 
 .label--md {
-  @mixin eds-theme-typography-label-md;
+  @mixin eds-theme-typography-label-md-subtle;
   line-height: var(--checkbox-svg-size); /* 1 */
 }
 
@@ -32,4 +31,3 @@
 .label--disabled {
   color: var(--eds-theme-color-text-disabled);
 }
-

src/components/OverflowList/OverflowList.tsx

@@ -128,6 +128,9 @@ export const OverflowList = ({ className, children, ...other }: Props) => {
         className={styles['overflow-list__inner']}
         onScroll={handleOnScroll}
         ref={overflowListInnerRef}
+        // TODO: add correct aria role for overflow list
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+        tabIndex={0}
       >
         {children}
       </ul>

src/design-tokens/css/base/body.css

@@ -1,5 +1,4 @@
 @import '../../mixins.css';
-@import '../../../styles/arimo.css';
 
 body {
   @mixin eds-theme-typography-body-text-md;

src/design-tokens/tier-1-definitions/fonts.css

@@ -0,0 +1,41 @@
+@font-face {
+  font-family: 'Graphik';
+  font-weight: 400;
+  font-style: normal;
+  src: url('./fonts/Graphik-Regular-Web.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Graphik';
+  font-weight: 400;
+  font-style: italic;
+  src: url('./fonts/Graphik-RegularItalic-Web.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Graphik';
+  font-weight: 500;
+  font-style: normal;
+  src: url('./fonts/Graphik-Medium-Web.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Graphik';
+  font-weight: 500;
+  font-style: italic;
+  src: url('./fonts/Graphik-MediumItalic-Web.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Graphik';
+  font-weight: 600;
+  font-style: normal;
+  src: url('./fonts/Graphik-Semibold-Web.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Graphik';
+  font-weight: 600;
+  font-style: italic;
+  src: url('./fonts/Graphik-SemiboldItalic-Web.woff2') format('woff2');
+}

src/design-tokens/tier-1-definitions/typography-presets.css

@@ -62,7 +62,7 @@ should be reflected in the TypographyPresets story */
 }
 
 /**
- * Typography Preset 004: Medium & Bold
+ * Typography Preset 004: Medium, Light, & Bold
  */
 @define-mixin eds-typography-preset-004 $important {
   font-family: var(--eds-font-family-primary) $important;
@@ -71,6 +71,11 @@ should be reflected in the TypographyPresets story */
   line-height: 1.333 $important;
 }
 
+@define-mixin eds-typography-preset-004-light $important {
+  @mixin eds-typography-preset-004 $important;
+  font-weight: var(--eds-font-weight-light) $important;
+}
+
 @define-mixin eds-typography-preset-004-bold $important {
   @mixin eds-typography-preset-004 $important;
   font-weight: var(--eds-font-weight-bold) $important;
@@ -97,15 +102,20 @@ should be reflected in the TypographyPresets story */
 }
 
 /**
- * Typography Preset 006: Light & Bold
+ * Typography Preset 006: Medium, Light, & Bold
  */
 @define-mixin eds-typography-preset-006 $important {
   font-family: var(--eds-font-family-primary) $important;
-  font-weight: var(--eds-font-weight-light) $important;
+  font-weight: var(--eds-font-weight-medium) $important;
   font-size: var(--eds-font-size-14) $important;
   line-height: 1.57 $important;
 }
 
+@define-mixin eds-typography-preset-006-light $important {
+  @mixin eds-typography-preset-006 $important;
+  font-weight: var(--eds-font-weight-light) $important;
+}
+
 @define-mixin eds-typography-preset-006-bold $important {
   @mixin eds-typography-preset-006 $important;
   font-weight: var(--eds-font-weight-bold) $important;

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

@@ -2,7 +2,7 @@
   "eds": {
     "font-family": {
       "primary": {
-        "value": "'Arimo', sans-serif"
+        "value": "'Graphik', sans-serif"
       },
       "secondary": {
         "value": "'Open Sans', sans-serif"

src/design-tokens/tier-2-usage/typography-usage.css

@@ -37,23 +37,23 @@
 }
 
 @define-mixin eds-theme-typography-body-text-lg $important {
-  @mixin eds-typography-preset-004 $important;
+  @mixin eds-typography-preset-004-light $important;
 }
 
 @define-mixin eds-theme-typography-body-text-md $important {
   @mixin eds-typography-preset-005-light $important;
 }
 
 @define-mixin eds-theme-typography-body-text-sm $important {
-  @mixin eds-typography-preset-006 $important;
+  @mixin eds-typography-preset-006-light $important;
 }
 
 @define-mixin eds-theme-typography-body-text-xs $important {
   @mixin eds-typography-preset-008 $important;
 }
 
 @define-mixin eds-theme-typography-caption-text-lg $important {
-  @mixin eds-typography-preset-006 $important;
+  @mixin eds-typography-preset-006-light $important;
 }
 
 @define-mixin eds-theme-typography-caption-text-md $important {
@@ -65,27 +65,27 @@
 }
 
 @define-mixin eds-theme-typography-button-label $important {
-  @mixin eds-typography-preset-006-bold $important;
+  @mixin eds-typography-preset-006 $important;
 }
 
 @define-mixin eds-theme-typography-form-label $important {
-  @mixin eds-typography-preset-006-bold $important;
+  @mixin eds-typography-preset-006 $important;
 }
 
 @define-mixin eds-theme-typography-form-input $important {
-  @mixin eds-typography-preset-005 $important;
+  @mixin eds-typography-preset-005-light $important;
 }
 
 @define-mixin eds-theme-typography-kicker $important {
-  @mixin eds-typography-preset-011-bold $important;
+  @mixin eds-typography-preset-011 $important;
 }
 
 @define-mixin eds-theme-typography-kicker-sm $important {
-  @mixin eds-typography-preset-012-bold $important;
+  @mixin eds-typography-preset-012 $important;
 }
 
 @define-mixin eds-theme-typography-tag $important {
-  @mixin eds-typography-preset-009-bold $important;
+  @mixin eds-typography-preset-009 $important;
 }
 
 /* Old / legacy heading sizes */

src/tokens-dist/css/variables.css

@@ -133,7 +133,7 @@
   --eds-size-half: 0.25rem;
   --eds-size-1-and-half: 0.75rem;
   --eds-size-2-and-half: 1.25rem;
-  --eds-font-family-primary: 'Arimo', sans-serif;
+  --eds-font-family-primary: 'Graphik', sans-serif;
   --eds-font-family-secondary: 'Open Sans', sans-serif;
   --eds-font-size-11: 0.688rem;
   --eds-font-size-12: 0.75rem;

src/tokens-dist/json/variables-nested.json

@@ -183,7 +183,7 @@
       "2-and-half": "1.25rem"
     },
     "font-family": {
-      "primary": "'Arimo', sans-serif",
+      "primary": "'Graphik', sans-serif",
       "secondary": "'Open Sans', sans-serif"
     },
     "font-size": {

src/tokens-dist/scss/_variables.scss

@@ -133,7 +133,7 @@ $eds-size-base-unit: 0.5rem !default;
 $eds-size-half: 0.25rem !default;
 $eds-size-1-and-half: 0.75rem !default;
 $eds-size-2-and-half: 1.25rem !default;
-$eds-font-family-primary: 'Arimo', sans-serif !default;
+$eds-font-family-primary: 'Graphik', sans-serif !default;
 $eds-font-family-secondary: 'Open Sans', sans-serif !default;
 $eds-font-size-11: 0.688rem !default;
 $eds-font-size-12: 0.75rem !default;