@nypl/design-system-react-components 1.0.1 → 1.0.2

package/src/theme/foundations/colors.ts

@@ -0,0 +1,212 @@
+import { Colors } from "@chakra-ui/react";
+
+/**
+ * All colors can be found in Storybook:
+ *   https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/docs/style-guide-colors--page
+ *
+ * All UI colors can be found in Figma:
+ *   https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=47083%3A27674
+ *
+ * All Brand colors can be found in Figma:
+ *   https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=15454%3A47007
+ *
+ * At the end of this file, there are objects that extend Chakra's default
+ * color shade palette for individual colors. WE DO NOT RECOMMEND to use them
+ * and only recommend to use the colors defined by the Design System such as the
+ * following "ui", "brand", and "section" colors below.
+ */
+
+// Reusable variables:
+const grayLightCool = "#E9E9E9";
+const grayxxLightCool = "#FAFAFA";
+const grayMedium = "#BDBDBD";
+const brandPrimary = "#C60917";
+const brandSecondary = "#760000";
+const brandObj = {
+  primary: brandPrimary,
+  secondary: brandSecondary,
+};
+
+const colors: Colors = {
+  transparent: "transparent",
+
+  // ui fills
+  ui: {
+    black: "#000",
+    white: "#fff",
+    /// State and link utilities
+    disabled: {
+      primary: grayLightCool,
+      secondary: grayxxLightCool,
+    },
+    error: {
+      primary: "#97272C",
+      secondary: "#6F0106",
+    },
+    focus: "#4181F1",
+    link: {
+      primary: "#0576D3",
+      secondary: "#004B98",
+    },
+    status: {
+      primary: "#F9E08E",
+      secondary: "#FBE7E1",
+    },
+    success: {
+      primary: "#077719",
+      secondary: "#095212",
+    },
+    test: "#FF6347",
+    warning: {
+      primary: "#F0974E",
+      secondary: "#EC7B1F",
+    },
+    // Grayscale
+    gray: {
+      xdark: "#424242",
+      dark: "#616161",
+      medium: grayMedium,
+      "light-cool": grayLightCool,
+      "light-warm": "#EFEDEB",
+      "x-light-cool": "#F5F5F5",
+      "x-light-warm": "#F8F8F7",
+      "xx-light-cool": grayxxLightCool,
+    },
+  },
+
+  /** Brand fills are the NYPL primary and secondary colors. */
+  brand: brandObj,
+
+  /** Brand fills for sections on NYPL pages. */
+  section: {
+    /** Blogs is used for the Blogs section. */
+    blogs: {
+      primary: grayLightCool,
+      secondary: grayMedium,
+    },
+
+    /** Books and More is used for the Catalog, Staff Picks, Recommendations,
+     * New Arrivals, and E-Book Central. */
+    "books-and-more": brandObj,
+
+    /** Education is used for the Education section front and associated
+     * sub-sections. */
+    education: {
+      primary: "#1D62E6",
+      secondary: "#2540A4",
+    },
+
+    /** Locations is used for Location Finder and all branch pages with
+     * the exceptions of some research libraries. */
+    locations: brandObj,
+
+    /** Research is used for the Research Catalog and SCC. */
+    research: {
+      primary: "#00838a",
+      secondary: "#006166",
+    },
+
+    /** Research libraries with specific brand colors to adhere to. */
+    "research-library": {
+      lpa: "#005d53",
+      schomburg: "#a03e31",
+      schwartzman: brandSecondary,
+    },
+
+    /** What's On is used for Exhibitions & Events. */
+    "whats-on": {
+      primary: "#242424",
+      secondary: "#000000",
+    },
+  },
+
+  /**
+   * The following color scales are useful for color edge cases where a
+   * distinct named ui or brand color doesn't quite work. These are used by
+   * Chakra and have been generated through https://themera.vercel.app/.
+   * While these colors are available, WE DO NOT RECOMMEND using them. Stick
+   * with the utility colors declared above.
+   * @Note If you do need to use a color variant, please contant the DS team.
+   */
+
+  /** based on ui.gray.medium = #DBDBDB */
+  gray: {
+    50: "#F2F2F2",
+    100: "#DBDBDB",
+    200: "#C4C4C4",
+    300: "#ADADAD",
+    400: "#969696",
+    500: "#808080",
+    600: "#666666",
+    700: "#4D4D4D",
+    800: "#333333",
+    900: "#1A1A1A",
+  },
+  /** based on ui.brand.primary = #C60917 */
+  red: {
+    50: "#FEE7E8",
+    100: "#FCBBC0",
+    200: "#FA8F97",
+    300: "#F8636E",
+    400: "#F63745",
+    500: "#F40B1C",
+    600: "#C30917",
+    700: "#920711",
+    800: "#62040B",
+    900: "#310206",
+  },
+  /** based on ui.warning.secondary = #F0974E */
+  orange: {
+    50: "#FDF1E7",
+    100: "#F9D8BD",
+    200: "#F6BF93",
+    300: "#F2A769",
+    400: "#EF8E3E",
+    500: "#EB7514",
+    600: "#BC5E10",
+    700: "#8D460C",
+    800: "#5E2F08",
+    900: "#2F1704",
+  },
+  /** based on ui.status.primary = #F9E08E */
+  yellow: {
+    50: "#FEF8E7",
+    100: "#FBECBB",
+    200: "#F9E090",
+    300: "#F7D464",
+    400: "#F4C938",
+    500: "#F2BD0D",
+    600: "#C2970A",
+    700: "#917108",
+    800: "#614B05",
+    900: "#302603",
+  },
+  /** based on ui.success.primary = #077719 */
+  green: {
+    50: "#E7FEEB",
+    100: "#BCFBC6",
+    200: "#90F8A1",
+    300: "#65F67C",
+    400: "#3AF357",
+    500: "#0EF133",
+    600: "#0BC128",
+    700: "#08911E",
+    800: "#066014",
+    900: "#03300A",
+  },
+  /** based on ui.link.primary = #0576D3 */
+  blue: {
+    50: "#E6F3FE",
+    100: "#B9DFFD",
+    200: "#8CCAFC",
+    300: "#60B5FB",
+    400: "#33A0FA",
+    500: "#068BF9",
+    600: "#056FC7",
+    700: "#045495",
+    800: "#023864",
+    900: "#011C32",
+  },
+};
+
+export default colors;

package/src/theme/foundations/global.ts

@@ -0,0 +1,43 @@
+import { activeFocus } from "../components/global";
+import { textMargin } from "../components/global";
+
+/**
+ * These rules affect all the global elements on the `body` element of the
+ * page when the `DSProvider` component is used.
+ */
+const global = {
+  // styles for the `body` element
+  body: {
+    boxSizing: "border-box",
+    bg: "ui.white",
+    color: "ui.black",
+    fontFamily: "body",
+    fontSize: "text.default",
+    fontWeight: "text.default",
+    lineHeight: "1.5",
+    overflowX: "hidden",
+  },
+  // styles for the `a` element
+  a: {
+    color: "ui.link.primary",
+  },
+  svg: {
+    display: "inline",
+  },
+  "button, select, input, textarea": {
+    "&:not([disabled])": {
+      _focus: activeFocus(),
+    },
+  },
+  "iframe, [href], [tabindex], [contentEditable='true']": {
+    _focus: activeFocus(),
+  },
+  p: textMargin,
+  ul: textMargin,
+  ol: textMargin,
+  "*, *::before, &::after": {
+    boxSizing: "inherit",
+  },
+};
+
+export default global;

package/src/theme/foundations/radii.ts

@@ -0,0 +1,7 @@
+const radii = {
+  checkbox: "3px",
+  pill: "20px",
+  round: "100%",
+};
+
+export default radii;

package/src/theme/foundations/shadows.ts

@@ -0,0 +1,5 @@
+const shadows = {
+  outline: "none",
+};
+
+export default shadows;

package/src/theme/foundations/spacing.ts

@@ -0,0 +1,136 @@
+/**
+ * Chakra spacing values are based on:
+ *   root size of 16px or 1rem
+ *   1 spacing unit is 4px or 0.25rem
+ *
+ * Chakra's mental model: If you need a spacing of 40px, divide it by 4.
+ * That'll give you 10. Then use it in your component.
+ *
+ * The DS uses nine CSS variables/values found in "src/styles/03-space/_space.css":
+ *   --nypl-space-xxxs = 2px or 0.125rem
+ *   --nypl-space-xxs = 4px or 0.25rem
+ *   --nypl-space-xs = 8px or 0.5rem
+ *   --nypl-space-s = 16px or 1rem
+ *   --nypl-space-m = 24px or 1.5rem
+ *   --nypl-space-l = 32px or 2rem
+ *   --nypl-space-xl = 48px or 3rem
+ *   --nypl-space-xxl = 64px or 4rem
+ *   --nypl-space-xxxl = 96px or 6rem
+ *
+ * @note Even though all the following values are available through Chakra,
+ * we recommend to only use the spacing values that map to the DS values
+ * declared above.
+ *
+ * Chakra Number Value | Chakra Name value | DS Variable
+ * ------------------- | ----------------- | -----------------
+ *        0.5          |         xxxs      |   --nypl-space-xxxs
+ *        1            |         xxs       |   --nypl-space-xxs
+ *        2            |         xs        |   --nypl-space-xs
+ *        4            |         s         |   --nypl-space-s
+ *        6            |         m         |   --nypl-space-m
+ *        8            |         l         |   --nypl-space-l
+ *        12           |         xl        |   --nypl-space-xl
+ *        16           |         xxl       |   --nypl-space-xxl
+ *        24           |         xxxl      |   --nypl-space-xxxl
+ */
+const chakraSpacingTokens = {
+  px: "1px",
+  0: "0",
+  0.5: "0.125rem",
+  1: "0.25rem",
+  1.5: "0.375rem",
+  2: "0.5rem",
+  2.5: "0.625rem",
+  3: "0.75rem",
+  3.5: "0.875rem",
+  4: "1rem",
+  5: "1.25rem",
+  6: "1.5rem",
+  7: "1.75rem",
+  8: "2rem",
+  9: "2.25rem",
+  10: "2.5rem",
+  12: "3rem",
+  14: "3.5rem",
+  16: "4rem",
+  20: "5rem",
+  24: "6rem",
+  28: "7rem",
+  32: "8rem",
+  36: "9rem",
+  40: "10rem",
+  44: "11rem",
+  48: "12rem",
+  52: "13rem",
+  56: "14rem",
+  60: "15rem",
+  64: "16rem",
+  72: "18rem",
+  80: "20rem",
+  96: "24rem",
+};
+const reservoirSpacingValues = {
+  xxxs: "0.125rem", // 2px
+  xxs: "0.25rem", // 4px
+  xs: "0.5rem", // 8px
+  s: "1rem", // 16px
+  m: "1.5rem", // 24px
+  l: "2rem", // 32px
+  xl: "3rem", // 48px
+  xxl: "4rem", // 64px
+  xxxl: "6rem", // 96px
+};
+const reservoirSpacingTokens = {
+  // Reservoir generic tokens
+  xxxs: reservoirSpacingValues["xxxs"],
+  xxs: reservoirSpacingValues["xxs"],
+  xs: reservoirSpacingValues["xs"],
+  s: reservoirSpacingValues["s"],
+  m: reservoirSpacingValues["m"],
+  l: reservoirSpacingValues["l"],
+  xl: reservoirSpacingValues["xl"],
+  xxl: reservoirSpacingValues["xxl"],
+  xxxl: reservoirSpacingValues["xxxl"],
+  // Reservoir semantic tokens
+  input: {
+    group: {
+      button: {
+        hstack: reservoirSpacingValues["xs"],
+        vstack: reservoirSpacingValues["xs"],
+      },
+      default: {
+        hstack: reservoirSpacingValues["l"],
+        vstack: reservoirSpacingValues["s"],
+      },
+    },
+  },
+  inset: {
+    default: reservoirSpacingValues["s"],
+    extranarrow: reservoirSpacingValues["xxs"],
+    extrawide: reservoirSpacingValues["xl"],
+    narrow: reservoirSpacingValues["xs"],
+    wide: reservoirSpacingValues["l"],
+  },
+  grid: {
+    default: reservoirSpacingValues["l"],
+    xxs: reservoirSpacingValues["xxs"],
+    xs: reservoirSpacingValues["xs"],
+    s: reservoirSpacingValues["s"],
+    m: reservoirSpacingValues["m"],
+    l: reservoirSpacingValues["l"],
+    xl: reservoirSpacingValues["xl"],
+    xxl: reservoirSpacingValues["xxl"],
+  },
+  page: {
+    hstack: reservoirSpacingValues["l"],
+    vstack: reservoirSpacingValues["l"],
+  },
+  table: {
+    column: reservoirSpacingValues["m"],
+    row: reservoirSpacingValues["l"],
+  },
+};
+export const spacing = {
+  ...chakraSpacingTokens,
+  ...reservoirSpacingTokens,
+};

package/src/theme/foundations/typography.ts

@@ -0,0 +1,107 @@
+import { Dict } from "../types";
+
+type Typography = {
+  fonts: Dict;
+  fontSizes: Dict;
+  fontWeights: Dict;
+};
+
+const fontSizeValues = {
+  "-3": "0.625rem",
+  "-2": "0.75rem",
+  "-1": "0.875rem",
+  "0": "1rem",
+  "1": "1.125rem",
+  "2": "1.375rem",
+  "3": "1.75rem",
+  "4": "2.25rem",
+};
+
+const fontWeightValues = {
+  light: 300,
+  regular: 400,
+  medium: 500,
+  bold: 700,
+};
+
+const typography: Typography = {
+  // Values from "src/styles/02-typography/_typeface.css"
+  fonts: {
+    body: "-apple-system, BlinkMacSystemFont, system-ui, sans-serif",
+    heading: "-apple-system, BlinkMacSystemFont, system-ui, sans-serif",
+  },
+  // Values from "src/styles/02-typography/_type-scale.css"
+  fontSizes: {
+    // generic tokens
+    "-3": fontSizeValues["-3"],
+    "-2": fontSizeValues["-2"],
+    "-1": fontSizeValues["-1"],
+    "0": fontSizeValues["0"],
+    "1": fontSizeValues["1"],
+    "2": fontSizeValues["2"],
+    "3": fontSizeValues["3"],
+    "4": fontSizeValues["4"],
+    // semantic tokens
+    breadcrumbs: {
+      default: fontSizeValues["-1"],
+    },
+    button: {
+      default: fontSizeValues["-1"],
+    },
+    heading: {
+      primary: fontSizeValues["4"],
+      secondary: fontSizeValues["3"],
+      tertiary: fontSizeValues["2"],
+      callout: fontSizeValues["1"],
+    },
+    helper: {
+      default: fontSizeValues["-2"],
+    },
+    label: {
+      default: fontSizeValues["-1"],
+      secondary: fontSizeValues["-2"],
+    },
+    text: {
+      default: fontSizeValues["0"],
+      caption: fontSizeValues["-1"],
+      tag: fontSizeValues["-2"],
+      mini: fontSizeValues["-3"],
+    },
+  },
+  // Values from "src/styles/02-typography/_type-weight.css"
+  fontWeights: {
+    // generic tokens
+    light: fontWeightValues["light"],
+    regular: fontWeightValues["regular"],
+    medium: fontWeightValues["medium"],
+    bold: fontWeightValues["bold"],
+    // semantic tokens
+    breadcrumbs: {
+      default: fontWeightValues["regular"],
+      lastChild: fontWeightValues["bold"],
+    },
+    button: {
+      default: fontWeightValues["regular"],
+    },
+    heading: {
+      primary: fontWeightValues["light"],
+      secondary: fontWeightValues["medium"],
+      tertiary: fontWeightValues["medium"],
+      callout: fontWeightValues["medium"],
+    },
+    helper: {
+      default: fontWeightValues["light"],
+    },
+    label: {
+      default: fontWeightValues["medium"],
+    },
+    text: {
+      default: fontWeightValues["light"],
+      caption: fontWeightValues["light"],
+      tag: fontWeightValues["regular"],
+      mini: fontWeightValues["regular"],
+    },
+  },
+};
+
+export default typography;

package/src/theme/index.ts

@@ -0,0 +1,131 @@
+import { extendTheme } from "@chakra-ui/react";
+/** Global theme styles */
+import global from "./foundations/global";
+import breakpoints from "./foundations/breakpoints";
+import colors from "./foundations/colors";
+import radii from "./foundations/radii";
+import shadows from "./foundations/shadows";
+import { spacing } from "./foundations/spacing";
+import typography from "./foundations/typography";
+/** Component styles */
+import Accordion from "./components/accordion";
+import Breadcrumb from "./components/breadcrumb";
+import Button from "./components/button";
+import ButtonGroup from "./components/buttonGroup";
+import Card from "./components/card";
+import Checkbox from "./components/checkbox";
+import ComponentWrapper from "./components/componentWrapper";
+import CheckboxGroup from "./components/checkboxGroup";
+import { CustomImage, CustomImageWrapper } from "./components/image";
+import CustomSelect from "./components/select";
+import DatePicker from "./components/datePicker";
+import Fieldset from "./components/fieldset";
+import Heading from "./components/heading";
+import HelperErrorText from "./components/helperErrorText";
+import Hero from "./components/hero";
+import HorizontalRule from "./components/horizontalRule";
+import Icon from "./components/icon";
+import Label from "./components/label";
+import Link from "./components/link";
+import List from "./components/list";
+import Logo from "./components/logo";
+import NotificationStyles from "./components/notification";
+import Pagination from "./components/pagination";
+import ProgressIndicator from "./components/progressIndicator";
+import Radio from "./components/radio";
+import RadioGroup from "./components/radioGroup";
+import SearchBar from "./components/searchBar";
+import { Skeleton, SkeletonLoader } from "./components/skeletonLoader";
+import SkipNavigation from "./components/skipNavigation";
+import CustomSlider from "./components/slider";
+import StatusBadge from "./components/statusBadge";
+import StructuredContent from "./components/structuredContent";
+import Tabs from "./components/tabs";
+import CustomTable from "./components/customTable";
+import TemplateStyles from "./components/template";
+import Text from "./components/text";
+import TextInput from "./components/textInput";
+import Toggle from "./components/toggle";
+import VideoPlayer from "./components/videoPlayer";
+
+/**
+ * See Chakra default theme for shape of theme object:
+ * https://github.com/chakra-ui/chakra-ui/tree/main/packages/theme
+ *
+ * The following are using the default configuration from Chakra:
+ *   - z-indices
+ *   - radii
+ *   - blur
+ *   - shadows
+ *   - borders
+ *   - transitions
+ *
+ * Theme extensions exist for:
+ *   - breakpoints
+ *   - colors
+ *   - typography (font, font size, font weight)
+ *   - spacing
+ */
+const theme = extendTheme({
+  styles: { global },
+  breakpoints,
+  colors,
+  radii,
+  shadows,
+  space: spacing,
+  ...typography,
+  /**
+   * Chakra documentation on component styles:
+   * https://chakra-ui.com/docs/theming/component-style
+   */
+  components: {
+    Accordion,
+    Breadcrumb,
+    Button,
+    ButtonGroup,
+    ...Card,
+    Checkbox,
+    CheckboxGroup,
+    ComponentWrapper,
+    CustomImage,
+    CustomImageWrapper,
+    CustomSelect,
+    DatePicker,
+    Fieldset,
+    Heading,
+    HelperErrorText,
+    Hero,
+    HorizontalRule,
+    Icon,
+    Label,
+    Link,
+    List,
+    Logo,
+    ...NotificationStyles,
+    Pagination,
+    ProgressIndicator,
+    Radio,
+    RadioGroup,
+    SearchBar,
+    Skeleton,
+    SkeletonLoader,
+    SkipNavigation,
+    CustomSlider,
+    StatusBadge,
+    StructuredContent,
+    Tabs,
+    CustomTable,
+    ...TemplateStyles,
+    Text,
+    TextInput,
+    ...Toggle,
+    VideoPlayer,
+  },
+  // Use `cssVarPrefix` to set the prefix used on the CSS vars produced by
+  // Chakra. By default, Chakra prefixes its own CSS variables with `--chakra`.
+  config: {
+    cssVarPrefix: "nypl",
+  },
+});
+
+export default theme;

package/src/theme/provider.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { ChakraProvider } from "@chakra-ui/react";
+import theme from "./index";
+
+const DSProvider = ({ children }: React.PropsWithChildren<{}>) => (
+  <ChakraProvider theme={theme}>{children}</ChakraProvider>
+);
+
+export default DSProvider;

package/src/theme/types.ts

@@ -0,0 +1 @@
+export type Dict<T = any> = Record<string, T>;