@nypl/design-system-react-components 1.0.0 → 1.0.3-beta

package/src/theme/foundations/colors.ts

@@ -1,212 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

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

package/src/theme/foundations/shadows.ts

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

package/src/theme/foundations/spacing.ts

@@ -1,136 +0,0 @@
-/**
- * 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

@@ -1,107 +0,0 @@
-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

@@ -1,131 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

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