[design-system] Typography v2 styles and components (#110)

.nvmrc

@@ -0,0 +1 @@
+lts/*

packages/design-system/.storybook/main.js

@@ -4,7 +4,18 @@ module.exports = {
     "../src/stories/Pages/*.stories.@(js|jsx|ts|tsx|mdx)",
     "../src/**/*.stories.@(js|jsx|ts|tsx|mdx)",
   ],
-  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    {
+      name: "@storybook/preset-scss",
+      options: {
+        cssLoaderOptions: {
+          modules: true,
+        },
+      },
+    },
+  ],
   typescript: {
     reactDocgen: "react-docgen-typescript",
     reactDocgenTypescriptOptions: {

packages/design-system/.storybook/preview.js

@@ -1,23 +1,11 @@
-import { AVAILABLE_FONTS, GlobalStyle } from "../src";
+import { GlobalStyle } from "../src";
 import { addDecorator } from "@storybook/react";
-import { ThemeProvider } from "styled-components";
 
 addDecorator((story) => {
   return (
     <>
-      <ThemeProvider
-        theme={{
-          fonts: {
-            heading: AVAILABLE_FONTS.LIBRE_BASKERVILLE,
-            body: AVAILABLE_FONTS.LIBRE_FRANKLIN,
-            serif: AVAILABLE_FONTS.LIBRE_BASKERVILLE,
-            sans: AVAILABLE_FONTS.LIBRE_FRANKLIN,
-          },
-        }}
-      >
-        <GlobalStyle />
-        {story()}
-      </ThemeProvider>
+      <GlobalStyle />
+      {story()}
     </>
   );
 });

packages/design-system/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## v4.0.0
+
+### Breaking changes
+
+**Typography v2**
+
+- Bundle includes SCSS variables and mixins for typography
+- New typography styles and components using Libre Baskerville and Public Sans
+- New styles/components replace themed fonts and some older Headings components
+
 ## v3.3.2
 
 ### Fixed

packages/design-system/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@recidiviz/design-system",
-  "version": "3.3.2",
+  "version": "4.0.0",
   "description": "UI components and styles for Recidiviz web products.",
   "author": "Recidiviz <[email protected]>",
   "license": "GPL-3.0-only",
@@ -10,7 +10,8 @@
   "main": "dist/index.js",
   "module": "dist/index.es.js",
   "files": [
-    "dist"
+    "dist",
+    "scss"
   ],
   "scripts": {
     "dev": "start-storybook -p 60006 -s public",
@@ -28,7 +29,6 @@
   },
   "dependencies": {
     "@fontsource/libre-baskerville": "^4.1.0",
-    "@fontsource/libre-franklin": "^4.1.0",
     "@fontsource/public-sans": "^4.5.3",
     "@types/react-tabs": "^2.3.2",
     "body-scroll-lock": "^3.1.5",
@@ -57,6 +57,7 @@
     "@storybook/addon-links": "^6.1.15",
     "@storybook/addons": "^6.1.15",
     "@storybook/node-logger": "^6.1.15",
+    "@storybook/preset-scss": "^1.0.3",
     "@storybook/react": "^6.1.15",
     "@storybook/storybook-deployer": "^2.8.10",
     "@types/body-scroll-lock": "^2.6.1",
@@ -72,6 +73,7 @@
     "@visx/mock-data": "^1.7.0",
     "babel-eslint": "^10.0.0",
     "babel-loader": "^8.0.0",
+    "css-loader": "^5.0.0",
     "eslint": "^7.15.0",
     "eslint-config-react-app": "^6.0.0",
     "eslint-import-resolver-typescript": "^2.3.0",
@@ -95,12 +97,19 @@
     "react-modal": "^3.12.1",
     "rollup": "^2.36.1",
     "rollup-plugin-analyzer": "^4.0.0",
+    "rollup-plugin-cleaner": "^1.0.0",
+    "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-node-externals": "^4.0.0",
     "rollup-plugin-postcss": "^4.0.0",
     "rollup-plugin-sourcemaps": "^0.6.3",
+    "rollup-plugin-styles": "^4.0.0",
     "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-typescript2": "^0.29.0",
+    "rollup-plugin-watcher": "^1.0.1",
+    "sass": "^1.52.1",
+    "sass-loader": "^10.1.1",
     "semiotic": "^1.20.6",
+    "style-loader": "^2.0.0",
     "typescript": "^4.1.2",
     "yalc": "^1.0.0-pre.53"
   },

packages/design-system/rollup.config.js

@@ -1,5 +1,5 @@
 // Recidiviz - a data platform for criminal justice reform
-// Copyright (C) 2020 Recidiviz, Inc.
+// Copyright (C) 2021 Recidiviz, Inc.
 //
 // This program is free software: you can redistribute it and/or modify
 // it under the terms of the GNU General Public License as published by
@@ -23,6 +23,10 @@ import typescript from "rollup-plugin-typescript2";
 import sourcemaps from "rollup-plugin-sourcemaps";
 import analyze from "rollup-plugin-analyzer";
 import externals from "rollup-plugin-node-externals";
+import styles from "rollup-plugin-styles";
+import copy from "rollup-plugin-copy";
+import cleaner from "rollup-plugin-cleaner";
+import watcher from "rollup-plugin-watcher";
 
 const packageJson = require("./package.json");
 
@@ -32,6 +36,9 @@ if (process.env.ANALYZE === "true") {
   optionalPlugins.push(analyze({ summaryOnly: true }));
 }
 
+if (process.env.ROLLUP_WATCH === "true") {
+  optionalPlugins.push(watcher(["src/scss/**/*.scss"]));
+}
 export default {
   input: "src/index.ts",
   output: [
@@ -47,15 +54,28 @@ export default {
     },
   ],
   plugins: [
+    cleaner({ targets: ["./dist"] }),
     externals(),
     postcss({
       plugins: [url({ url: "inline" })],
+      modules: true,
     }),
     resolve(),
     commonjs(),
     svg({ base64: true }),
     sourcemaps(),
     typescript({ clean: true, useTsconfigDeclarationDir: true }),
+    styles({ modules: true }),
+    copy({
+      targets: [
+        {
+          src: "src/scss/**/*.scss",
+          dest: "dist",
+        },
+      ],
+      flatten: false,
+      verbose: true,
+    }),
     ...optionalPlugins,
   ],
 };

packages/design-system/src/components/Button/Button.styles.tsx

@@ -18,6 +18,7 @@ import { rem } from "polished";
 import styled, { css } from "styled-components";
 import { ButtonProps } from "./Button.types";
 import { animation, palette, spacing } from "../../styles";
+import { typography } from "../../styles/typography";
 
 const pillStyles = css`
   min-width: ${rem(129)};
@@ -91,11 +92,11 @@ const borderlessStyles = css`
 `;
 
 export const BaseButton = styled.button<Pick<ButtonProps, "kind" | "shape">>`
+  ${typography.Sans14}
+
   align-items: center;
   cursor: pointer;
   display: flex;
-  font-family: ${(props) => props.theme.fonts.body};
-  font-size: ${rem(14)};
   justify-content: center;
   transition-duration: ${animation.defaultDurationMs}ms;
   transition-property: color, background-color, border-color;
@@ -130,11 +131,11 @@ export const BaseButton = styled.button<Pick<ButtonProps, "kind" | "shape">>`
 `;
 
 export const LinkButton = styled.button<ButtonProps>`
+  ${typography.Sans14}
   background: transparent;
   border: none;
   color: ${palette.signal.links};
   cursor: pointer;
-  font-family: ${(props) => props.theme.fonts.body};
   padding: 0;
 
   &:active,

packages/design-system/src/components/ChartWrapper/ChartWrapper.tsx

@@ -17,7 +17,7 @@
 
 import * as React from "react";
 import styled from "styled-components";
-import { palette } from "../../styles";
+import { palette, typography } from "../../styles";
 import { tooltipStyles } from "../Tooltip";
 
 const SemioticWrapper = styled.div`
@@ -40,22 +40,18 @@ const SemioticWrapper = styled.div`
 
     .axis-label,
     .ordinal-labels {
+      ${typography.Sans12}
       fill: ${palette.text.caption};
-      font-size: 12px;
-      font-weight: 600;
-      letter-spacing: -0.01em;
     }
 
     .axis-title {
+      ${typography.Sans14}
       fill: ${palette.text.caption};
-      font-size: 13px;
-      font-weight: 600;
-      letter-spacing: -0.01em;
     }
 
     .frame-title {
+      ${typography.Sans16}
       fill: ${palette.text.normal};
-      font-size: 16px;
     }
 
     .pieces {

packages/design-system/src/components/Dropdown/Dropdown.styles.tsx

@@ -16,13 +16,14 @@
 // =============================================================================
 import { rem } from "polished";
 import styled, { css } from "styled-components";
-import { palette, spacing } from "../../styles";
+import { palette, spacing, typography } from "../../styles";
 import { Button } from "../Button";
 
 export const MenuItemElement = styled.button.attrs({
   type: "button",
   role: "menuitem",
 })`
+  ${typography.Sans14}
   color: ${palette.pine3};
   list-style: none;
   height: ${rem(32)};
@@ -36,8 +37,6 @@ export const MenuItemElement = styled.button.attrs({
   width: 100%;
   text-align: left;
   white-space: nowrap;
-  font-size: ${rem(14)};
-  font-family: ${(props) => props.theme.fonts.body};
 
   &:focus {
     outline: none;
@@ -66,6 +65,7 @@ export const MenuItemElement = styled.button.attrs({
 `;
 
 export const MenuLabelElement = styled.div`
+  ${typography.Sans14}
   color: ${palette.slate70};
   height: ${rem(32)};
   line-height: ${rem(32)};
@@ -95,9 +95,9 @@ export interface MenuElementProps {
 export const MenuElement = styled.div.attrs({
   role: "menubar",
 })<MenuElementProps>`
+  ${typography.Sans14}
   display: flex;
   flex-direction: column;
-  font-family: ${(props) => props.theme.fonts.sans};
   position: absolute;
   min-width: 193px;
   padding: 0;
@@ -108,7 +108,6 @@ export const MenuElement = styled.div.attrs({
   box-shadow: 0px 15px 40px rgba(53, 83, 98, 0.3),
     inset 0px -1px 1px rgba(19, 44, 82, 0.2);
   border-radius: 8px;
-  font-size: ${rem(14)};
 
   transition: 0.15s ease-in-out;
   transition-property: opacity, transform;

packages/design-system/src/components/ErrorPage/ErrorPage.styles.tsx

@@ -16,7 +16,7 @@
 // =============================================================================
 import styled from "styled-components";
 import { rem } from "polished";
-import { spacing } from "../../styles";
+import { spacing, typography } from "../../styles";
 
 export const OuterErrorPageContainer = styled.div`
   display: flex;
@@ -30,16 +30,11 @@ export const InnerErrorPageContainer = styled.div`
 `;
 
 export const ErrorPageHeader = styled.h1`
-  font-family: ${(props) => props.theme.fonts.heading};
-  font-weight: normal;
-  font-style: normal;
-  font-size: ${rem(34)};
+  ${typography.Header34}
 
   margin: ${rem(spacing.xl)} 0;
 `;
 
 export const ErrorPageBody = styled.div`
-  font-family: ${(props) => props.theme.fonts.body};
-  font-size: ${rem(19)};
-  line-height: ${rem(32)};
+  ${typography.Body19}
 `;

packages/design-system/src/components/GlobalStyle/GlobalStyle.ts

@@ -16,11 +16,11 @@
 // =============================================================================
 import { createGlobalStyle } from "styled-components";
 import { rem } from "polished";
-import { palette, spacing } from "../../styles";
-import "@fontsource/public-sans";
+import { palette, spacing, typography } from "../../styles";
+import "@fontsource/public-sans/400.css";
 import "@fontsource/public-sans/500.css";
-import "@fontsource/libre-franklin";
-import "@fontsource/libre-franklin/500.css";
+import "@fontsource/public-sans/600.css";
+import "@fontsource/public-sans/700.css";
 import "@fontsource/libre-baskerville";
 
 export const GlobalStyle = createGlobalStyle`
@@ -45,20 +45,17 @@ export const GlobalStyle = createGlobalStyle`
   }
    
   body {
+    ${typography.Sans16}
     height: 100%;
     margin: 0;
     padding: 0;
     background: ${palette.marble3};
     color: ${palette.pine3};
-    font-family: ${(props) => props.theme.fonts.body};
-    font-size: ${rem("16px")};
-    letter-spacing: -0.01em;
-    line-height: 1.5;
     -webkit-font-smoothing: antialised;
     text-rendering: optimizeLegibility;
   }
   
   strong {
-    font-weight: 500;
+    font-weight: 700;
   }
 `;