@nypl/design-system-react-components 0.25.13 → 0.27.0

package/src/theme/foundations/colors.ts

@@ -20,7 +20,7 @@ import { Colors } from "@chakra-ui/react";
  */
 
 // Reusable variables:
-const grayLightCool = "#E0E0E0";
+const grayLightCool = "#E9E9E9";
 const grayxxLightCool = "#FAFAFA";
 const grayMedium = "#BDBDBD";
 const brandPrimary = "#C60917";

package/src/theme/foundations/radii.ts

@@ -1,4 +1,5 @@
 const radii = {
+  checkbox: "3px",
   pill: "20px",
   round: "100%",
 };

package/src/theme/foundations/spacing.ts

@@ -1,12 +1,13 @@
 /**
- * This is based on:
+ * 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 eight CSS variables/values found in "src/styles/03-space/_space.css":
+ * 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
@@ -22,7 +23,7 @@
  *
  * Chakra Number Value | Chakra Name value | DS Variable
  * ------------------- | ----------------- | -----------------
- *        0.5            |         xxxs       |   --nypl-space-xxxs
+ *        0.5          |         xxxs      |   --nypl-space-xxxs
  *        1            |         xxs       |   --nypl-space-xxs
  *        2            |         xs        |   --nypl-space-xs
  *        4            |         s         |   --nypl-space-s
@@ -32,45 +33,27 @@
  *        16           |         xxl       |   --nypl-space-xxl
  *        24           |         xxxl      |   --nypl-space-xxxl
  */
-export const spacing = {
+const chakraSpacingTokens = {
   px: "1px",
   0: "0",
-  // --nypl-space-xxxs = 2px
-  xxxs: "0.125rem",
   0.5: "0.125rem",
-  // --nypl-space-xxs = 4px
-  xxs: "0.25rem",
   1: "0.25rem",
   1.5: "0.375rem",
-  // --nypl-space-xs = 8px
-  xs: "0.5rem",
   2: "0.5rem",
   2.5: "0.625rem",
   3: "0.75rem",
   3.5: "0.875rem",
-  // --nypl-space-s = 16px
-  s: "1rem",
   4: "1rem",
   5: "1.25rem",
-  // --nypl-space-m = 24px
-  m: "1.5rem",
   6: "1.5rem",
   7: "1.75rem",
-  // --nypl-space-l = 32px
-  l: "2rem",
   8: "2rem",
   9: "2.25rem",
   10: "2.5rem",
-  // --nypl-space-xl = 48px
-  xl: "3rem",
   12: "3rem",
   14: "3.5rem",
-  // --nypl-space-xxl = 64px
-  xxl: "4rem",
   16: "4rem",
   20: "5rem",
-  // --nypl-space-xxxl = 96px
-  xxxl: "6rem",
   24: "6rem",
   28: "7rem",
   32: "8rem",
@@ -86,3 +69,68 @@ export const spacing = {
   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

@@ -41,7 +41,7 @@ const typography: Typography = {
     "2": fontSizeValues["2"],
     "3": fontSizeValues["3"],
     "4": fontSizeValues["4"],
-    // specific tokens
+    // semantic tokens
     breadcrumbs: {
       default: fontSizeValues["-1"],
     },
@@ -75,7 +75,7 @@ const typography: Typography = {
     regular: fontWeightValues["regular"],
     medium: fontWeightValues["medium"],
     bold: fontWeightValues["bold"],
-    // specific tokens
+    // semantic tokens
     breadcrumbs: {
       default: fontWeightValues["regular"],
       lastChild: fontWeightValues["bold"],

package/src/utils/componentCategories.ts

@@ -1,4 +1,4 @@
-// NYPL Design System Component Categories
+// NYPL Reservoir Design System Component Categories
 
 const categories = {
   accessibility: {
@@ -83,7 +83,6 @@ const categories = {
       "StructuredContent",
       "ContentSwitcher",
       "Footer",
-      "Grid",
       "Header",
       "HorizontalRule",
       "Section",

package/dist/components/SearchBar/SearchBar.Test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/helpers/generateUUID.d.ts

@@ -1 +0,0 @@
-export default function generateUUID(): any;

package/src/components/Modal/_Modal.scss

@@ -1,18 +0,0 @@
-.no-scroll {
-  overflow: hidden;
-  position: fixed;
-  top: -100vh;
-}
-
-.modal {
-  padding: var(--nypl-space-s);
-
-  background-color: var(--nypl-colors-ui-gray-x-light-warm);
-  height: 100vh;
-  left: 0;
-  overflow-y: auto;
-  position: fixed;
-  top: 0;
-  width: 100vw;
-  z-index: 999;
-}

package/src/helpers/generateUUID.tsx

@@ -1,5 +0,0 @@
-import { v4 as uuidv4 } from "uuid";
-
-export default function generateUUID() {
-  return uuidv4();
-}