diff --git a/src/components/Text/Text.mdx b/src/components/Text/Text.mdx
index 658c5b771e..b1de228186 100644
--- a/src/components/Text/Text.mdx
+++ b/src/components/Text/Text.mdx
@@ -10,7 +10,7 @@ import Link from "../Link/Link";
| Component Version | DS Version |
| ----------------- | ---------- |
| Added | `0.25.1` |
-| Latest | `1.7.1` |
+| Latest | `2.0.0` |
## Table of Contents
diff --git a/src/components/Text/Text.test.tsx b/src/components/Text/Text.test.tsx
index e85e68b715..626354d17c 100644
--- a/src/components/Text/Text.test.tsx
+++ b/src/components/Text/Text.test.tsx
@@ -29,18 +29,103 @@ describe("Text", () => {
);
});
+ it("throws a warning when isBold is used with size caption", () => {
+ const warn = jest.spyOn(console, "warn");
+ render(
+
+ test text!
+
+ );
+ expect(warn).toHaveBeenCalledWith(
+ "NYPL Reservoir Text: The `isBold` prop does not work with caption text."
+ );
+ });
+
+ it("throws a warning when isBold is used with size overline", () => {
+ const warn = jest.spyOn(console, "warn");
+ const { rerender } = render(
+
+ test text!
+
+ );
+ expect(warn).toHaveBeenCalledWith(
+ "NYPL Reservoir Text: The `isBold` prop does not work with overline text."
+ );
+ rerender(
+
+ test text!
+
+ );
+ expect(warn).toHaveBeenCalledWith(
+ "NYPL Reservoir Text: The `isBold` prop does not work with overline text."
+ );
+ });
+ it("throws a warning when isBold is used with size subtitle", () => {
+ const warn = jest.spyOn(console, "warn");
+ const { rerender } = render(
+
+ test text!
+
+ );
+ expect(warn).toHaveBeenCalledWith(
+ "NYPL Reservoir Text: The `isBold` prop does not work with subtitle text."
+ );
+ rerender(
+
+ test text!
+
+ );
+ expect(warn).toHaveBeenCalledWith(
+ "NYPL Reservoir Text: The `isBold` prop does not work with subtitle text."
+ );
+ });
+ it("throws a warning when isBold is used with size tag", () => {
+ const warn = jest.spyOn(console, "warn");
+ render(
+
+ test text!
+
+ );
+ expect(warn).toHaveBeenCalledWith(
+ "NYPL Reservoir Text: The `isBold` prop does not work with tag text."
+ );
+ });
+ it("throws a warning when isBold is used with size mini", () => {
+ const warn = jest.spyOn(console, "warn");
+ render(
+
+ test text!
+
+ );
+ expect(warn).toHaveBeenCalledWith(
+ "NYPL Reservoir Text: The `isBold` prop does not work with mini text."
+ );
+ });
+
it("renders the UI snapshot correctly", () => {
const defaultText = renderer
.create(Animal Crossing is all that!)
.toJSON();
+ const body1 = renderer
+ .create(Animal Crossing is all that!)
+ .toJSON();
+ const body2 = renderer
+ .create(Animal Crossing is all that!)
+ .toJSON();
const caption = renderer
.create(Animal Crossing is all that!)
.toJSON();
- const tag = renderer
- .create(Animal Crossing is all that!)
+ const subtitle1 = renderer
+ .create(Animal Crossing is all that!)
+ .toJSON();
+ const subtitle2 = renderer
+ .create(Animal Crossing is all that!)
+ .toJSON();
+ const overline1 = renderer
+ .create(Animal Crossing is all that!)
.toJSON();
- const mini = renderer
- .create(Animal Crossing is all that!)
+ const overline2 = renderer
+ .create(Animal Crossing is all that!)
.toJSON();
const withChakraProps = renderer
.create(
@@ -54,9 +139,13 @@ describe("Text", () => {
.toJSON();
expect(defaultText).toMatchSnapshot();
+ expect(body1).toMatchSnapshot();
+ expect(body2).toMatchSnapshot();
expect(caption).toMatchSnapshot();
- expect(tag).toMatchSnapshot();
- expect(mini).toMatchSnapshot();
+ expect(subtitle1).toMatchSnapshot();
+ expect(subtitle2).toMatchSnapshot();
+ expect(overline1).toMatchSnapshot();
+ expect(overline2).toMatchSnapshot();
expect(withChakraProps).toMatchSnapshot();
expect(withOtherProps).toMatchSnapshot();
});
diff --git a/src/components/Text/Text.tsx b/src/components/Text/Text.tsx
index 9c6d3858dc..c397fe6dcc 100644
--- a/src/components/Text/Text.tsx
+++ b/src/components/Text/Text.tsx
@@ -92,7 +92,7 @@ export const Text = chakra(
}
if (isBold && size === "mini") {
console.warn(
- "NYPL Reservoir Text: The `isBold` prop does not work with min text."
+ "NYPL Reservoir Text: The `isBold` prop does not work with mini text."
);
}
diff --git a/src/components/Text/__snapshots__/Text.test.tsx.snap b/src/components/Text/__snapshots__/Text.test.tsx.snap
index 4e7c730044..4e2c409226 100644
--- a/src/components/Text/__snapshots__/Text.test.tsx.snap
+++ b/src/components/Text/__snapshots__/Text.test.tsx.snap
@@ -34,13 +34,45 @@ exports[`Text renders the UI snapshot correctly 4`] = `
exports[`Text renders the UI snapshot correctly 5`] = `
Animal Crossing is all that!
`;
exports[`Text renders the UI snapshot correctly 6`] = `
+
+ Animal Crossing is all that!
+
+`;
+
+exports[`Text renders the UI snapshot correctly 7`] = `
+
+ Animal Crossing is all that!
+
+`;
+
+exports[`Text renders the UI snapshot correctly 8`] = `
+
+ Animal Crossing is all that!
+
+`;
+
+exports[`Text renders the UI snapshot correctly 9`] = `
+
+ Animal Crossing is all that!
+
+`;
+
+exports[`Text renders the UI snapshot correctly 10`] = `
(
- Invalid
+
+ Invalid
+
- Disabled
+
+ Disabled
+
(
- Default
+
+ Default
+
- Small
+
+ Small
+
(
- Default
+
+ Default
+
- Disabled
+
+ Disabled
+
- Error
+
+ Error
+
(
- Grouped
+
+ Grouped
+
@@ -136,7 +148,9 @@ export const Layouts: Story = {
- With Helper Text
+
+ With Helper Text
+
VideoPlayer Heading
@@ -90,7 +90,7 @@ exports[`VideoPlayer renders the UI snapshot correctly 3`] = `
id="video-player-with-text-componentWrapper-wrapper"
>
VideoPlayer Heading
diff --git a/src/docs/Welcome.mdx b/src/docs/Welcome.mdx
index 9a43417b92..d99a5292c4 100644
--- a/src/docs/Welcome.mdx
+++ b/src/docs/Welcome.mdx
@@ -17,17 +17,39 @@ import Text from "../components/Text/Text";
-
+
The React Component Library of the New York Public Library
- Reservoir is NYPL's open-source extensible React component library for
+ Reservoir v2 is NYPL's open-source extensible React component library for
products and experiences, with accessibility as its core. Aiming to
provide design and user experience consistency, Reservoir is the
foundation for all digital properties in the NYPL landscape, offering
functional components that implement the NYPL style standards.
+
+ Reservoir v2.x
+
+
+ Reservoir v2.x is the latest version of the React Component Library of the
+ New York Public Library.
+
+
+ Reservoir v1.7.3
+
+
+ Reservoir v1.7.3 is the last version in the v1 series. If you are unable
+ to upgrade to the latest version of Reservoir, the documentation for the
+ v1 series is available at the link below.
+
+
+ Documentation for Reservoir v1.7.3
+
-
+
Get Started
-
+
To start using Reservoir Design System, refer to Reservoir's Github{" "}
-
+
Find Components
-
+
For your convenience, the Reservoir Design System components have
been organized into logical categories based on both form and
function. Please refer to the COMPONENTS section in the
@@ -116,11 +138,11 @@ import Text from "../components/Text/Text";
marginBottom="s"
/>
-
+
View the Code
-
+
The Reservoir Design System React component library is currently
published on{" "}
+{
+// The documentation for the useFilterBar hook will be removed until the
+// refactor of the v2 version of the MultiSelect and FilterBar components has
+// been completed. To add the link for the useFilterBar hook back to the
+// side bar, update the element below.
+//
+}
+
+
# useFilterBar
diff --git a/src/hooks/useMultiSelect.mdx b/src/hooks/useMultiSelect.mdx
index e26400eaac..bfebcd68fe 100644
--- a/src/hooks/useMultiSelect.mdx
+++ b/src/hooks/useMultiSelect.mdx
@@ -1,6 +1,14 @@
import { Meta, Source } from "@storybook/blocks";
-
+{
+// The documentation for the useMultiSelect hook will be removed until the
+// refactor of the v2 version of the MultiSelect and FilterBar components has
+// been completed. To add the link for the useMultiSelect hook back to the
+// side bar, update the element below.
+//
+}
+
+
# useMultiSelect
diff --git a/src/hooks/useNYPLTheme.ts b/src/hooks/useNYPLTheme.ts
index 80cb163c06..0fefc9cfd0 100644
--- a/src/hooks/useNYPLTheme.ts
+++ b/src/hooks/useNYPLTheme.ts
@@ -46,14 +46,20 @@ function useNYPLTheme() {
"4": theme.fontSizes["4"],
// default
breadcrumbs: theme.fontSizes.breadcrumbs,
- // default
+ // small, default, large
button: theme.fontSizes.button,
+ // body, breadcrumbs, button, caption, default
+ // heading, helper, label, overline, subtitle
+ desktop: theme.fontSizes.desktop,
// primary, secondary, tertiary, callout
heading: theme.fontSizes.heading,
// default
helper: theme.fontSizes.helper,
// default, secondary
label: theme.fontSizes.label,
+ // body, breadcrumbs, button, caption, default
+ // heading, helper, label, overline, subtitle
+ mobile: theme.fontSizes.mobile,
// default, caption, tag, mini
text: theme.fontSizes.text,
},
@@ -61,17 +67,28 @@ function useNYPLTheme() {
light: theme.fontWeights.light,
regular: theme.fontWeights.regular,
medium: theme.fontWeights.medium,
+ semibold: theme.fontWeights.semibold,
bold: theme.fontWeights.bold,
+ // default, body1, body2
+ body: theme.fontWeights.body,
// default, lastChild
breadcrumbs: theme.fontWeights.breadcrumbs,
// default
button: theme.fontWeights.button,
- // primary, secondary, tertiary, callout
+ caption: theme.fontWeights.caption,
+ default: theme.fontWeights.default,
+ // display1, heading1, heading2, heading3, heading4,
+ // heading5, heading6
+ // deprecated: primary, secondary, tertiary, callout
heading: theme.fontWeights.heading,
// default
helper: theme.fontWeights.helper,
- // default
+ // default, secondary
label: theme.fontWeights.label,
+ // overline1, overline2
+ overline: theme.fontWeights.overline,
+ // subtitle1, subtitle2
+ subtitle: theme.fontWeights.subtitle,
// default, caption, tag, mini
text: theme.fontWeights.text,
},
diff --git a/src/index.ts b/src/index.ts
index 7a109747e6..8208f3a4e1 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -51,7 +51,9 @@ export {
} from "./components/FeedbackBox/FeedbackBox";
export type { FeedbackBoxViewType } from "./components/FeedbackBox/FeedbackBox";
export { default as Fieldset } from "./components/Fieldset/Fieldset";
-export { default as FilterBar } from "./components/FilterBar/FilterBar";
+// The code associated with the FilterBar component will not be exported until
+// the refactor of the v2 version of the FilterBar component has been completed.
+// export { default as FilterBar } from "./components/FilterBar/FilterBar";
export { default as Form, FormField, FormRow } from "./components/Form/Form";
export { default as Heading } from "./components/Heading/Heading";
export type { HeadingSizes, HeadingLevels } from "./components/Heading/Heading";
@@ -84,14 +86,17 @@ export type { DescriptionProps, ListTypes } from "./components/List/List";
export { default as Logo } from "./components/Logo/Logo";
export type { LogoNames, LogoSizes } from "./components/Logo/Logo";
export { ModalTrigger, useModal } from "./components/Modal/Modal";
-export { default as MultiSelect } from "./components/MultiSelect/MultiSelect";
-export type {
- MultiSelectProps,
- MultiSelectItem,
- SelectedItems,
-} from "./components/MultiSelect/MultiSelect";
-export { default as MultiSelectGroup } from "./components/MultiSelectGroup/MultiSelectGroup";
-export type { MultiSelectGroupProps } from "./components/MultiSelectGroup/MultiSelectGroup";
+// The code associated with the MultiSelect component will not be exported until
+// the refactor of the v2 version of the MultiSelect component has been
+// completed.
+// export { default as MultiSelect } from "./components/MultiSelect/MultiSelect";
+// export type {
+// MultiSelectProps,
+// MultiSelectItem,
+// SelectedItems,
+// } from "./components/MultiSelect/MultiSelect";
+// export { default as MultiSelectGroup } from "./components/MultiSelectGroup/MultiSelectGroup";
+// export type { MultiSelectGroupProps } from "./components/MultiSelectGroup/MultiSelectGroup";
export { default as Notification } from "./components/Notification/Notification";
export type { NotificationTypes } from "./components/Notification/Notification";
export { default as Pagination } from "./components/Pagination/Pagination";
@@ -111,6 +116,7 @@ export { default as SkeletonLoader } from "./components/SkeletonLoader/SkeletonL
export type { SkeletonLoaderImageRatios } from "./components/SkeletonLoader/SkeletonLoader";
export { default as SkipNavigation } from "./components/SkipNavigation/SkipNavigation";
export { default as Slider } from "./components/Slider/Slider";
+export { default as SocialMediaLinks } from "./components/SocialMediaLinks/SocialMediaLinks";
export { default as StatusBadge } from "./components/StatusBadge/StatusBadge";
export type { StatusBadgeTypes } from "./components/StatusBadge/StatusBadge";
export { default as StructuredContent } from "./components/StructuredContent/StructuredContent";
@@ -149,8 +155,11 @@ export { default as Toggle } from "./components/Toggle/Toggle";
export type { ToggleSizes } from "./components/Toggle/Toggle";
export { default as useCarouselStyles } from "./hooks/useCarouselStyles";
export { default as useCloseDropDown } from "./hooks/useCloseDropDown";
-export { default as useFilterBar } from "./hooks/useFilterBar";
-export { default as useMultiSelect } from "./hooks/useMultiSelect";
+// The useFilterBar and useMultiSelect hooks will not be exported until the
+// refactor of the v2 versions of the MultiSelect and FilterBar components has
+// been completed.
+// export { default as useFilterBar } from "./hooks/useFilterBar";
+// export { default as useMultiSelect } from "./hooks/useMultiSelect";
export { default as useNYPLBreakpoints } from "./hooks/useNYPLBreakpoints";
export { default as useNYPLTheme } from "./hooks/useNYPLTheme";
export { default as useWindowSize } from "./hooks/useWindowSize";
diff --git a/src/theme/components/accordion.ts b/src/theme/components/accordion.ts
index 79e031f0d9..ec4a29cf25 100644
--- a/src/theme/components/accordion.ts
+++ b/src/theme/components/accordion.ts
@@ -3,12 +3,12 @@ const containerStyles = {
width: "100%",
_dark: {
bg: "dark.ui.bg.default",
- color: "dark.ui.typography.heading",
borderColor: "dark.ui.border.default",
},
};
const buttonStyles = {
borderWidth: "1px",
+ color: "ui.typography.heading",
fontWeight: "medium",
_dark: {
bg: "dark.ui.bg.default",
diff --git a/src/theme/components/alphabetFilter.ts b/src/theme/components/alphabetFilter.ts
index 7aeec1f5f2..f53e41d01c 100644
--- a/src/theme/components/alphabetFilter.ts
+++ b/src/theme/components/alphabetFilter.ts
@@ -8,13 +8,17 @@ const AlphabetFilter = {
padding: "1px 4px",
margin: "2px 1px",
fontWeight: "bold",
- fontSize: "heading.callout",
+ fontSize: {
+ base: "mobile.subtitle.subtitle1",
+ md: "desktop.subtitle.subtitle1",
+ },
lineHeight: "1",
_last: {
- padding: "0 16px",
+ fontSize: "desktop.button.default",
fontWeight: "normal",
+ px: { base: "s", md: "xs" },
+ py: { base: null, md: "xxs" },
whiteSpace: "nowrap",
- fontSize: { base: null, md: "text.caption" },
},
_disabled: {
color: "ui.gray.medium",
diff --git a/src/theme/components/breadcrumb.ts b/src/theme/components/breadcrumb.ts
index ccc66ac95b..870c9c957a 100644
--- a/src/theme/components/breadcrumb.ts
+++ b/src/theme/components/breadcrumb.ts
@@ -93,6 +93,7 @@ const Breadcrumb = {
a: {
_hover: {
color: "ui.gray.light-cool",
+ textDecoration: "none",
},
},
"li:last-child": {
diff --git a/src/theme/components/button.ts b/src/theme/components/button.ts
index f1b8ecb4ff..e2cf0cc591 100644
--- a/src/theme/components/button.ts
+++ b/src/theme/components/button.ts
@@ -164,7 +164,7 @@ export const pill = ({ buttonSize = "medium" }) => ({
border: "1px solid",
borderColor: "ui.border.default",
borderRadius: "button.pill",
- color: "inherit",
+ color: "ui.typography.heading",
...generalSizeValues(buttonSize, true),
_hover: {
bg: "ui.gray.xx-light-cool",
diff --git a/src/theme/components/card.ts b/src/theme/components/card.ts
index b8183123a6..1d000a6213 100644
--- a/src/theme/components/card.ts
+++ b/src/theme/components/card.ts
@@ -1,3 +1,5 @@
+import { baseLinkStyles } from "./link";
+
interface CardBaseStyleProps {
hasImage: boolean;
imageIsAtEnd: boolean;
@@ -133,10 +135,12 @@ const Card = {
},
heading: {
marginBottom: "xs",
- a: mainActionLink ? { color: "ui.typography.heading" } : null,
- _dark: {
- a: mainActionLink ? { color: "dark.ui.typography.heading" } : null,
- },
+ a: mainActionLink
+ ? {
+ ...baseLinkStyles,
+ textDecoration: "none",
+ }
+ : null,
},
...baseBorderStyles,
...layoutStyles,
diff --git a/src/theme/components/checkbox.ts b/src/theme/components/checkbox.ts
index 651894528c..9e8e878073 100644
--- a/src/theme/components/checkbox.ts
+++ b/src/theme/components/checkbox.ts
@@ -37,7 +37,7 @@ const baseStyleControl = {
},
_disabled: {
- bg: "ui.gray.xx-light-cool",
+ bg: "ui.disabled.secondary",
borderColor: "ui.disabled.primary",
svg: {
color: "ui.disabled.primary",
diff --git a/src/theme/components/customTable.ts b/src/theme/components/customTable.ts
index db4a3bb569..2c9423a3b2 100644
--- a/src/theme/components/customTable.ts
+++ b/src/theme/components/customTable.ts
@@ -49,7 +49,7 @@ export const baseCellStyles = (
borderBottom: showRowDividers ? "1px solid" : "0",
borderColor: CellBorderColorStyles(),
display: { base: "flex", md: "table-cell" },
- fontSize: { base: "text.caption", lg: "text.default" },
+ fontSize: { base: "desktop.body.body2", md: "desktop.body.body1" },
gap: "s",
letterSpacing: "0",
lineHeight: 1.5,
@@ -80,7 +80,9 @@ export const baseCellStyles = (
bg: columnHeadersBackgroundColor
? columnHeadersBackgroundColor
: undefined,
- color: columnHeadersTextColor ? columnHeadersTextColor : "ui.black",
+ color: columnHeadersTextColor
+ ? columnHeadersTextColor
+ : "ui.typography.heading",
fontWeight: "medium",
paddingStart:
columnHeadersBackgroundColor || showRowDividers || useRowHeaders
@@ -106,7 +108,9 @@ export const baseTHStyles = (
showRowDividers,
useRowHeaders
),
- color: columnHeadersTextColor ? columnHeadersTextColor : "ui.black",
+ color: columnHeadersTextColor
+ ? columnHeadersTextColor
+ : "ui.typography.heading",
fontWeight: "medium",
textTransform: "capitalize",
_first: {
@@ -156,15 +160,15 @@ export const baseStyle = ({
}: BaseStyleProps) => ({
// Headers `th` can be rendered as the first cell in every row through the
// `useRowHeaders`. Whereas the header `th` in the `thead` can be rendered
- // with a custom color, the row header `th` in the `tbody` should always
- // have text color black for light color mode and `dark.ui.typography.heading`
- // for dark color mode.
+ // with a custom color, the row header `th` in the `tbody` should always have
+ // text color `ui.typography.heading` for light color mode and
+ // `dark.ui.typography.heading` for dark color mode.
tbody: {
th: {
backgroundColor: useRowHeaders
? { base: "ui.gray.x-light-cool", md: "unset" }
: undefined,
- color: "ui.black",
+ color: "ui.typography.heading",
verticalAlign: "top",
_dark: {
backgroundColor: useRowHeaders
@@ -199,9 +203,12 @@ export const baseStyle = ({
),
caption: {
captionSide: "top",
- color: "ui.black",
- fontSize: "heading.secondary",
- fontWeight: "heading.secondary",
+ color: "ui.typography.heading",
+ fontSize: {
+ base: "mobile.heading.heading2",
+ md: "desktop.heading.heading2",
+ },
+ fontWeight: "heading.heading2",
marginBottom: "s",
marginStart: "0",
marginEnd: "0",
diff --git a/src/theme/components/feedbackBox.ts b/src/theme/components/feedbackBox.ts
index 1ef5492a31..d29762b4d6 100644
--- a/src/theme/components/feedbackBox.ts
+++ b/src/theme/components/feedbackBox.ts
@@ -37,6 +37,10 @@ const FeedbackBox = {
drawerContent: {
marginStart: "auto",
width: { base: "100%", md: "375px" },
+ aside: {
+ color: "ui.typography.heading",
+ _dark: { color: "dark.ui.typography.heading" },
+ },
},
drawerHeader: {
alignItems: "baseline",
@@ -44,8 +48,9 @@ const FeedbackBox = {
borderBottomWidth: "1px",
borderLeftWidth: { base: undefined, md: "1px" },
borderTopWidth: "1px",
+ color: "ui.typography.heading",
display: "flex",
- fontSize: "text.default",
+ fontSize: "desktop.body.body1",
px: "m",
paddingTop: "s",
paddingBottom: "s",
@@ -55,6 +60,7 @@ const FeedbackBox = {
_dark: {
background: "dark.ui.bg.hover",
borderColor: "dark.ui.border.default",
+ color: "dark.ui.typography.heading",
},
},
openButton: {
diff --git a/src/theme/components/fieldset.ts b/src/theme/components/fieldset.ts
index a486b999b5..65dffc5531 100644
--- a/src/theme/components/fieldset.ts
+++ b/src/theme/components/fieldset.ts
@@ -13,8 +13,12 @@ const Fieldset = {
border: 0,
padding: 0,
legend: {
+ color: "ui.typography.heading",
...labelLegendText,
...screenreaderStyles,
+ _dark: {
+ color: "dark.ui.typography.heading",
+ },
},
};
},
diff --git a/src/theme/components/global.ts b/src/theme/components/global.ts
index 7868a23577..bef15dc056 100644
--- a/src/theme/components/global.ts
+++ b/src/theme/components/global.ts
@@ -101,6 +101,7 @@ const defaultElementSizes = {
};
// Used in `Label` and `Fieldset`.
const labelLegendText = {
+ color: "ui.typography.heading",
display: "inline-block",
fontSize: "desktop.label.label1",
fontWeight: "label.default",
diff --git a/src/theme/components/heading.ts b/src/theme/components/heading.ts
index d7501d9e5f..103b3a9932 100644
--- a/src/theme/components/heading.ts
+++ b/src/theme/components/heading.ts
@@ -15,6 +15,7 @@ export const headings = {
lineHeight: "1.1",
...margins,
width: "auto",
+ a: { textUnderlineOffset: "4px" },
},
two: {
fontSize: "heading.secondary", // var(--nypl-fontSizes-3);
@@ -22,6 +23,7 @@ export const headings = {
lineHeight: "1.25",
...margins,
width: "auto",
+ a: { textUnderlineOffset: "3px" },
},
three: {
fontSize: "heading.tertiary", // var(--nypl-fontSizes-2);
@@ -46,41 +48,49 @@ export const headings = {
},
display1: {
fontWeight: "heading.display1",
- letterSpacing: "1px",
- lineHeight: "1.05",
+ letterSpacing: "0.0625rem",
+ lineHeight: "1.10",
width: "auto",
+ a: { textUnderlineOffset: "7px" },
},
heading1: {
fontWeight: "heading.heading1",
- letterSpacing: "1px",
- lineHeight: "1.05",
+ letterSpacing: "0.0625rem",
+ lineHeight: "1.15",
width: "auto",
+ a: { textUnderlineOffset: "6px" },
},
heading2: {
fontWeight: "heading.heading2",
- letterSpacing: "1px",
- lineHeight: "1.15",
+ letterSpacing: "0.0625rem",
+ lineHeight: "1.20",
width: "auto",
+ a: { textUnderlineOffset: "5px" },
},
heading3: {
fontWeight: "heading.heading3",
- letterSpacing: "1px",
- lineHeight: "1.15",
+ letterSpacing: "0",
+ lineHeight: "1.25",
width: "auto",
+ a: { textUnderlineOffset: "4px" },
},
heading4: {
fontWeight: "heading.heading4",
- lineHeight: "1.2",
+ letterSpacing: "0",
+ lineHeight: "1.30",
width: "auto",
+ a: { textUnderlineOffset: "3px" },
},
heading5: {
fontWeight: "heading.heading5",
- lineHeight: "1.2",
+ letterSpacing: "0",
+ lineHeight: "1.35",
width: "auto",
},
heading6: {
fontWeight: "heading.heading6",
- lineHeight: "1.2",
+ letterSpacing: "0",
+ lineHeight: "1.40",
width: "auto",
},
};
@@ -118,10 +128,14 @@ const variants = {
const Heading = {
parts: ["headingWrapper"],
- baseStyle: ({ isCapitalized, isUppercase, isLowercase, noSpace }) => ({
+ baseStyle: ({ isCapitalized, isUppercase, isLowercase, noSpace, url }) => ({
// This is to help target custom anchor elements
// passed as children to the Heading component.
- a: baseLinkStyles,
+ a: {
+ ...baseLinkStyles,
+ textDecoration: url ? "none" : "underline",
+ },
+ color: "ui.typography.heading",
textTransform: isCapitalized
? "capitalize"
: isUppercase
@@ -138,13 +152,13 @@ const Heading = {
},
}),
// Available variants:
- // one, two, three, four, five, six
- // primary, secondary, tertiary, callout
// h1, h2, h3, h4, h5, h6
- // heading1, heading2, heading3, heading4, heading5, heading6
+ // display1, heading1, heading2, heading3, heading4, heading5, heading6
+ // DEPRECATED: one, two, three, four, five, six
+ // DEPRECATED: primary, secondary, tertiary, callout
variants,
defaultProps: {
- variant: "secondary",
+ variant: "h2",
},
};
diff --git a/src/theme/components/hero.ts b/src/theme/components/hero.ts
index 9c509944ab..bab6ef25e6 100644
--- a/src/theme/components/hero.ts
+++ b/src/theme/components/hero.ts
@@ -40,7 +40,7 @@ const secondaryBase = {
// Used for all "secondary" variants' heading component.
const secondaryHeadingBase = {
marginBottom: "0",
- color: "ui.white",
+ color: "ui.typography.inverse.heading",
flex: "1 1 100%",
marginTop: "0",
paddingBottom: "xxs",
@@ -71,11 +71,13 @@ const getSecondaryVariantStyles = (bgColor: string = "") => {
...secondaryBase,
heading: {
...secondaryHeadingBase,
+ color: bgColor ? "ui.white" : "ui.typography.inverse.heading",
_before: {
...secondaryHeadingBase["_before"],
bg: finalBgColor.light,
},
_dark: {
+ color: "dark.ui.typography.heading",
_before: {
bg: finalBgColor.dark,
},
@@ -97,7 +99,7 @@ const primary = {
minHeight: "350px",
content: {
bg: "ui.black",
- color: "ui.white",
+ color: "ui.typography.inverse.body",
flex: {
base: "0 0 100%",
md: "0 0 60%",
@@ -111,17 +113,18 @@ const primary = {
color: "inherit",
display: "inline-block",
},
- heading: {
- marginBottom: "0",
- },
bodyText: {
marginBottom: "0",
},
+ // h1: { color: "ui.typography.inverse.heading" },
_dark: {
bgColor: "dark.ui.bg.default",
color: "dark.ui.typography.body",
},
},
+ heading: {
+ color: "dark.ui.typography.heading",
+ },
};
const secondary = getSecondaryVariantStyles();
const secondaryBooksAndMore = getSecondaryVariantStyles(
@@ -136,7 +139,7 @@ const tertiary = {
bg: "ui.gray.x-dark",
content: {
...wrapperStyles,
- color: "ui.white",
+ color: "ui.typography.inverse.body",
display: "flex",
flexFlow: "column nowrap",
px: "inset.default",
@@ -146,10 +149,11 @@ const tertiary = {
marginTop: { base: "xxs", xl: "xs" },
},
_dark: {
- color: "dark.ui.typography.body",
+ p: { color: "dark.ui.typography.body" },
},
},
heading: {
+ color: "ui.typography.inverse.heading",
marginBottom: "0",
_lastChild: {
marginBottom: "0",
@@ -179,7 +183,7 @@ const campaign = {
content: {
alignItems: "stretch",
bg: "ui.black",
- color: "ui.white",
+ color: "ui.typography.inverse.body",
display: "flex",
flexFlow: {
base: "column nowrap",
@@ -195,6 +199,9 @@ const campaign = {
color: "dark.ui.typography.body",
},
},
+ heading: {
+ color: "dark.ui.typography.heading",
+ },
a: {
color: "inherit",
display: "inline-block",
diff --git a/src/theme/components/image.ts b/src/theme/components/image.ts
index 825d8e7d46..35ea48cf1a 100644
--- a/src/theme/components/image.ts
+++ b/src/theme/components/image.ts
@@ -102,7 +102,6 @@ const CustomImage = {
},
figcaption: {
fontStyle: "italic",
- fontSize: "text.tag",
},
img: {
display: "block",
@@ -116,9 +115,6 @@ const CustomImage = {
backgroundColor: "dark.ui.bg.default",
},
},
- captionWrappers: {
- marginTop: "xxs",
- },
}),
};
const CustomImageWrapper = {
diff --git a/src/theme/components/link.ts b/src/theme/components/link.ts
index 218732a4e4..afe376736f 100644
--- a/src/theme/components/link.ts
+++ b/src/theme/components/link.ts
@@ -11,15 +11,26 @@ import { screenreaderOnly } from "./globalMixins";
export const baseLinkStyles = {
color: "ui.link.primary",
textDecoration: "underline",
+ textDecorationStyle: "dotted",
+ textDecorationThickness: "1px",
+ textUnderlineOffset: "2px",
_dark: {
color: "dark.ui.link.primary",
},
_hover: {
color: "ui.link.secondary",
+ textDecorationStyle: "dotted",
+ textDecorationThickness: "1px",
_dark: {
color: "dark.ui.link.secondary",
},
},
+ _visited: {
+ color: "ui.link.tertiary",
+ _dark: {
+ color: "dark.ui.link.tertiary",
+ },
+ },
};
const baseButtonLinkStyles = {
@@ -42,6 +53,20 @@ const variants = {
textDecoration: "none",
fill: "currentColor",
},
+ _hover: {
+ color: "ui.link.secondary",
+ textDecoration: "underline",
+ },
+ _visited: {
+ svg: {
+ fill: "ui.link.tertiary",
+ },
+ _dark: {
+ svg: {
+ fill: "dark.ui.link.tertiary",
+ },
+ },
+ },
},
// The "button" variant is deprecated.
button: {
@@ -70,32 +95,77 @@ const variants = {
bg: "dark.ui.link.secondary",
},
},
+ _visited: {
+ color: "ui.white",
+ _dark: {
+ _visited: {
+ color: "ui.gray.xxx-dark",
+ },
+ },
+ },
},
buttonPrimary: {
...baseButtonLinkStyles,
...primary({}),
+ _hover: {
+ backgroundColor: "ui.link.secondary",
+ color: "ui.white",
+ },
+ _visited: {
+ color: "ui.white",
+ _dark: {
+ color: "ui.gray.xxx-dark",
+ },
+ },
},
buttonSecondary: {
...baseButtonLinkStyles,
...secondary({}),
_visited: {
color: "ui.link.primary",
+ _dark: {
+ color: "dark.ui.link.primary",
+ },
},
},
buttonPill: {
...baseButtonLinkStyles,
...pill({}),
+ _hover: {
+ color: "ui.black",
+ },
_visited: {
color: "ui.black",
+ _dark: {
+ color: "ui.white",
+ },
},
},
buttonCallout: {
...baseButtonLinkStyles,
...callout({}),
+ _hover: {
+ color: "ui.white",
+ },
+ _visited: {
+ color: "ui.white",
+ _dark: {
+ color: "ui.white",
+ },
+ },
},
buttonNoBrand: {
...baseButtonLinkStyles,
...noBrand({}),
+ _hover: {
+ color: "ui.white",
+ },
+ _visited: {
+ color: "ui.white",
+ _dark: {
+ color: "ui.white",
+ },
+ },
},
buttonDisabled: {
...baseButtonLinkStyles,
@@ -106,6 +176,9 @@ const variants = {
pointerEvents: "none",
_visited: {
color: "ui.gray.dark",
+ _dark: {
+ color: "dark.ui.disabled.primary",
+ },
},
_dark: {
bg: "dark.ui.disabled.secondary",
@@ -115,8 +188,9 @@ const variants = {
};
const Link = {
parts: ["screenreaderOnly"],
- baseStyle: {
+ baseStyle: ({ finalIsUnderlined = true }) => ({
...baseLinkStyles,
+ textDecoration: finalIsUnderlined ? "underline" : "none",
/** This is needed for custom anchor elements or link components
* that are passed as children to the `Link` component. */
a: {
@@ -127,7 +201,7 @@ const Link = {
/** The element will handle descriptive text added to aid
* screen readers. */
screenreaderOnly: screenreaderOnly(),
- },
+ }),
variants,
};
diff --git a/src/theme/components/list.ts b/src/theme/components/list.ts
index 118d48bf87..954fcc5479 100644
--- a/src/theme/components/list.ts
+++ b/src/theme/components/list.ts
@@ -72,6 +72,7 @@ export const baseDescriptionStyles = {
dt: {
borderTop: "1px solid",
borderColor: "ui.border.default",
+ color: "ui.typography.heading",
fontWeight: "label.default",
paddingBottom: { base: "0", md: "s" },
paddingTop: "s",
diff --git a/src/theme/components/modal.ts b/src/theme/components/modal.ts
index 228f4b7dd1..a8c6205703 100644
--- a/src/theme/components/modal.ts
+++ b/src/theme/components/modal.ts
@@ -15,6 +15,12 @@ const Modal = {
},
},
header: {
+ color: "ui.typography.heading",
+ fontSize: {
+ base: "mobile.heading.heading4",
+ md: "desktop.heading.heading4",
+ },
+ fontWeight: "medium",
_dark: {
color: "dark.ui.typography.heading",
},
diff --git a/src/theme/components/multiSelectMenuButton.ts b/src/theme/components/multiSelectMenuButton.ts
index 59645bbded..5caa02216a 100644
--- a/src/theme/components/multiSelectMenuButton.ts
+++ b/src/theme/components/multiSelectMenuButton.ts
@@ -9,6 +9,7 @@ const MultiSelectMenuButton = {
],
baseStyle: ({ hasSelectedItems = false, isOpen = false }) => ({
buttonLabel: {
+ color: isOpen ? "ui.typography.heading" : "ui.typography.body",
justifyContent: "flex-start",
overflow: "hidden",
marginLeft: hasSelectedItems ? "50px" : "0",
@@ -17,6 +18,11 @@ const MultiSelectMenuButton = {
textOverflow: "ellipsis",
whiteSpace: "nowrap",
transition: "margin 150ms ease-out",
+ _dark: {
+ color: isOpen
+ ? "dark.ui.typography.heading"
+ : "dark.ui.typography.body",
+ },
},
menuButton: {
alignItems: "center",
@@ -62,7 +68,7 @@ const MultiSelectMenuButton = {
borderColor: isOpen ? "ui.border.hover" : "ui.border.default",
display: "flex",
flexShrink: 0,
- fontSize: "text.tag",
+ fontSize: "desktop.caption",
justifyContent: "flex-end",
left: "15px",
marginRight: "xs",
diff --git a/src/theme/components/notification.ts b/src/theme/components/notification.ts
index 2d9c634270..12a7f0fc37 100644
--- a/src/theme/components/notification.ts
+++ b/src/theme/components/notification.ts
@@ -36,7 +36,7 @@ const Notification = {
bg,
borderRadius: noMargin ? "0" : "4px",
display: "flex",
- fontSize: "text.caption", // slightly smaller than the default size
+ fontSize: "desktop.body.body2", // slightly smaller than the default size
m: noMargin ? "0" : "s",
position: "relative",
p: "inset.default",
@@ -57,7 +57,7 @@ const Notification = {
border: "none",
bgColor: "inherit",
alignItems: "center",
- color: "ui.black",
+ color: "ui.typography.heading",
display: "flex",
h: "32px",
w: "32px",
@@ -69,7 +69,7 @@ const Notification = {
marginTop: "0",
},
_dark: {
- color: "dark.ui.typography.body",
+ color: "dark.ui.typography.heading",
},
_hover: {
bg: "inherit",
@@ -133,7 +133,7 @@ const NotificationHeading = {
isCentered,
notificationType,
}: NotificationHeadingBaseStyle) => {
- let color = "ui.black";
+ let color = "ui.typography.heading";
if (notificationType === "announcement") {
color = "section.research.secondary";
} else if (notificationType === "warning") {
@@ -177,6 +177,7 @@ const NotificationHeading = {
svg: {
mx: isCentered ? "auto" : "",
mb: isCentered ? "xxs" : "0",
+ mt: isCentered ? undefined : "xxxs",
},
};
},
diff --git a/src/theme/components/pagination.ts b/src/theme/components/pagination.ts
index 67fd6ce329..a4a29aab05 100644
--- a/src/theme/components/pagination.ts
+++ b/src/theme/components/pagination.ts
@@ -7,6 +7,9 @@ const Pagination = {
link: {
lineHeight: "1.15",
textDecoration: "none",
+ _hover: {
+ textDecoration: "none",
+ },
},
ul: {
marginBottom: "0",
diff --git a/src/theme/components/progressIndicator.ts b/src/theme/components/progressIndicator.ts
index 053a85ee3e..10515dcf46 100644
--- a/src/theme/components/progressIndicator.ts
+++ b/src/theme/components/progressIndicator.ts
@@ -17,7 +17,8 @@ const ProgressIndicator = {
],
baseStyle: ({ darkMode, size }: ProgressIndicatorBaseStyle) => {
return {
- color: darkMode ? "ui.white" : "ui.black",
+ color: darkMode ? "dark.ui.typography.heading" : "ui.typography.heading",
+ fontSize: "desktop.body.body2",
_dark: {
color: "dark.ui.typography.heading",
},
diff --git a/src/theme/components/select.ts b/src/theme/components/select.ts
index 8b843f35ea..dfbd7e4180 100644
--- a/src/theme/components/select.ts
+++ b/src/theme/components/select.ts
@@ -11,15 +11,15 @@ interface SelectBaseStyle {
const select = {
backgroundColor: "ui.white",
borderRadius: "sm",
- borderColor: "ui.gray.medium",
- fontSize: "text.caption",
+ borderColor: "ui.border.default",
+ fontSize: "desktop.body.body2",
minHeight: { base: defaultElementSizes.mobileFieldHeight, md: "auto" },
paddingTop: "inset.narrow",
paddingEnd: "inset.extrawide",
paddingBottom: "inset.narrow",
paddingStart: "inset.default",
_hover: {
- borderColor: "ui.gray.dark",
+ borderColor: "ui.border.hover",
},
_active: selectTextInputFocusStyles,
_disabled: {
@@ -60,7 +60,7 @@ const Select = {
return {
inline: {
display: { md: "flex" },
- gap: { md: "var(--nypl-space-xs)" },
+ gap: { md: "xs" },
alignItems: { md: "flex-end" },
},
select: {
diff --git a/src/theme/components/slider.ts b/src/theme/components/slider.ts
index 4c39439e90..a654235a16 100644
--- a/src/theme/components/slider.ts
+++ b/src/theme/components/slider.ts
@@ -76,7 +76,7 @@ const CustomSlider = {
bgColor: baseColor,
},
track: {
- bgColor: "ui.gray.light-cool",
+ bgColor: "ui.bg.hover",
_disabled: {
bgColor: "ui.disabled.primary",
},
diff --git a/src/theme/components/socialmedialinks.ts b/src/theme/components/socialmedialinks.ts
new file mode 100644
index 0000000000..76ff546ed3
--- /dev/null
+++ b/src/theme/components/socialmedialinks.ts
@@ -0,0 +1,229 @@
+// @todo maybe set the border to always be on, but invisible if prop is set to "none"?
+
+import { StyleFunctionProps } from "@chakra-ui/theme-tools";
+
+function getPadding(size) {
+ let paddingSize = "xs"; // 8px / .5rem
+ switch (size) {
+ case "medium":
+ paddingSize = "0.75rem"; // 12px @todo There is no JS token for this value. I assume it is ok to mix tokens & absolute values.
+ break;
+ case "large":
+ paddingSize = "s"; // 16px / 1rem
+ break;
+ }
+ return {
+ paddingSize,
+ };
+}
+
+function getColor(color) {
+ let ltColor = "ui.typography.heading",
+ dkColor = "dark.ui.typography.heading";
+
+ switch (color) {
+ case "link":
+ ltColor = "ui.link.primary";
+ dkColor = "dark.ui.link.primary";
+ break;
+ case "textInverse":
+ ltColor = "ui.typography.inverse.heading";
+ dkColor = "dark.ui.typography.inverse.heading";
+ break;
+ }
+
+ return {
+ ltColor,
+ dkColor,
+ };
+}
+
+const SocialMediaLinks = {
+ // The base styles for each part
+ baseStyle: {
+ // ul styles should not specifically be identified as ul:
+ display: "flex",
+ alignItems: "flex-start",
+ gap: "s", // 1rem / 16px
+ width: { base: "100%", md: "unset" },
+ marginBottom: "unset",
+ li: {
+ marginInlineEnd: "0",
+ marginTop: "0",
+ width: { base: "100%", md: "unset" },
+ _notFirst: {
+ marginTop: "0",
+ },
+ },
+ a: {
+ display: "flex",
+ justifyContent: "center",
+ alignContent: "center",
+ flexWrap: "wrap",
+ minWidth: { base: "44px", md: "unset" },
+ minHeight: { base: "44px", md: "unset" },
+ fontStyle: "normal",
+ fontSize: "desktop.body.body2",
+ textDecoration: "none",
+ color: "ui.typography.heading",
+ _hover: {
+ color: "ui.typography.heading",
+ },
+ _visited: {
+ color: "ui.typography.heading",
+ },
+ _dark: {
+ color: "dark.ui.typography.heading",
+ _hover: {
+ color: "dark.ui.typography.heading",
+ },
+ _visited: {
+ color: "dark.ui.typography.heading",
+ },
+ },
+ },
+ div: {
+ display: "flex",
+ alignItems: "center",
+ gap: "xs", // .5rem / 8px
+ alignSelf: "stretch",
+ justifyContent: "center",
+ width: "fit-content",
+ height: "fit-content",
+ },
+ svg: {
+ fill: "ui.typography.heading",
+ _dark: {
+ fill: "dark.ui.typography.heading",
+ },
+ },
+ },
+ // The variants are based on border values
+ variants: {
+ // Each variant is a function that returns an object with styles for that variant.
+ straight(props: StyleFunctionProps) {
+ const { color, layout } = props;
+ let theseColors = getColor(color);
+ return {
+ flexDirection: { base: "column", md: layout },
+ gap: "xs", // Borders require the gap to reduce from 1rem to .5rem / 8px.
+ a: {
+ color: theseColors.ltColor,
+ _hover: {
+ color: theseColors.ltColor,
+ },
+ _visited: {
+ color: theseColors.ltColor,
+ },
+ _dark: {
+ borderColor: theseColors.dkColor,
+ color: theseColors.dkColor,
+ _hover: {
+ color: theseColors.dkColor,
+ },
+ _visited: {
+ color: theseColors.dkColor,
+ },
+ },
+ },
+ div: {
+ padding: "xs",
+ borderRadius: "button.default",
+ borderWidth: "1px",
+ borderStyle: "solid",
+ borderColor: theseColors.ltColor,
+ _dark: {
+ borderColor: theseColors.dkColor,
+ },
+ },
+ svg: {
+ fill: theseColors.ltColor,
+ _dark: {
+ fill: theseColors.dkColor,
+ borderColor: theseColors.dkColor,
+ },
+ },
+ };
+ },
+ circular(props: StyleFunctionProps) {
+ const { color, size, layout } = props;
+ let theseColors = getColor(color);
+ return {
+ flexDirection: { base: "column", md: layout },
+ gap: "xs",
+ a: {
+ color: theseColors.ltColor,
+ _hover: {
+ color: theseColors.ltColor,
+ },
+ _visited: {
+ color: theseColors.ltColor,
+ },
+ _dark: {
+ color: theseColors.dkColor,
+ _hover: {
+ color: theseColors.dkColor,
+ },
+ _visited: {
+ color: theseColors.dkColor,
+ },
+ },
+ },
+ div: {
+ padding: getPadding(size).paddingSize,
+ borderRadius: "100%",
+ borderColor: theseColors.ltColor,
+ borderWidth: "0.0625rem",
+ borderStyle: "solid",
+ _dark: {
+ borderColor: theseColors.dkColor,
+ },
+ },
+ svg: {
+ fill: theseColors.ltColor,
+ _dark: {
+ fill: theseColors.dkColor,
+ },
+ },
+ };
+ },
+ // Variant 3
+ none(props: StyleFunctionProps) {
+ const { color, layout } = props;
+ let theseColors = getColor(color);
+ return {
+ flexDirection: { base: "column", md: layout },
+ a: {
+ color: theseColors.ltColor,
+ _hover: {
+ color: theseColors.ltColor,
+ },
+ _visited: {
+ color: theseColors.ltColor,
+ },
+ _dark: {
+ color: theseColors.dkColor,
+ _hover: {
+ color: theseColors.dkColor,
+ },
+ _visited: {
+ color: theseColors.dkColor,
+ },
+ },
+ },
+ svg: {
+ fill: theseColors.ltColor,
+ _dark: {
+ fill: theseColors.dkColor,
+ },
+ },
+ };
+ },
+ },
+ // The default `size` or `variant` values
+ defaultProps: {
+ variant: "none",
+ },
+};
+
+export default SocialMediaLinks;
diff --git a/src/theme/components/statusBadge.ts b/src/theme/components/statusBadge.ts
index f98a7f3a61..ab52b3ad00 100644
--- a/src/theme/components/statusBadge.ts
+++ b/src/theme/components/statusBadge.ts
@@ -1,9 +1,9 @@
const StatusBadge = {
baseStyle: {
borderRadius: "base",
- color: "ui.black",
+ color: "ui.typography.heading",
display: "block",
- fontSize: "-1", // slightly smaller than the default size
+ fontSize: "desktop.body.body2", // slightly smaller than the default size
fontStyle: "italic",
py: "inset.extranarrow",
px: "inset.narrow",
@@ -12,7 +12,7 @@ const StatusBadge = {
_dark: {
backgroundColor: "dark.ui.bg.active",
borderLeft: "4px solid",
- borderColor: "ui.gray.medium",
+ borderColor: "dark.ui.border.default",
color: "dark.ui.typography.heading",
},
},
diff --git a/src/theme/components/styledList.ts b/src/theme/components/styledList.ts
index 193ec41759..476b9cee64 100644
--- a/src/theme/components/styledList.ts
+++ b/src/theme/components/styledList.ts
@@ -2,7 +2,12 @@ import { baseListStyles, baseUnorderedStyles } from "./list";
const StyledList = {
baseStyle: ({ textSize = "default" }) => ({
- fontSize: `text.${textSize}`,
+ fontSize:
+ textSize === "tag" || textSize === "mini"
+ ? `text.${textSize}`
+ : textSize === "caption" || textSize === "default"
+ ? `desktop.${textSize}`
+ : `desktop.body.${textSize}`,
...baseListStyles(false, true),
...baseUnorderedStyles(true),
}),
diff --git a/src/theme/components/tabs.ts b/src/theme/components/tabs.ts
index bb94168e44..1a811b9ef0 100644
--- a/src/theme/components/tabs.ts
+++ b/src/theme/components/tabs.ts
@@ -2,12 +2,10 @@ const tablist = {
borderColor: "ui.black",
};
const tab = {
- paddingInlineStart: "s",
- paddingStart: "s",
background: "transparent",
border: "0",
borderBottom: "1px solid",
- borderColor: "red",
+ color: "ui.typography.heading",
height: { base: "44px" },
marginEnd: {
base: "0",
@@ -18,6 +16,8 @@ const tab = {
md: "l",
lg: "xl",
},
+ paddingInlineStart: "s",
+ paddingStart: "s",
whiteSpace: "nowrap",
_hover: {
bg: "ui.gray.x-light-cool",
diff --git a/src/theme/components/tagSet.ts b/src/theme/components/tagSet.ts
index cbef1aef2b..23728ab364 100644
--- a/src/theme/components/tagSet.ts
+++ b/src/theme/components/tagSet.ts
@@ -10,7 +10,7 @@ const TagSetFilter = {
border: "1px solid",
borderColor: "ui.border.default",
borderRadius: "pill",
- color: "ui.black",
+ color: "ui.typography.body",
cursor: isDismissible ? "pointer" : "auto",
height: { base: "32px", md: "22px" },
minHeight: "22px",
@@ -18,7 +18,7 @@ const TagSetFilter = {
py: "xxxs",
paddingLeft: "s",
paddingRight: isDismissible ? { base: "8px", md: "6px" } : "s",
- fontSize: "text.tag",
+ fontSize: "desktop.caption",
"> span": {
display: "inline-block",
overflow: "hidden",
@@ -41,9 +41,9 @@ const TagSetFilter = {
},
},
clearAll: {
- color: "ui.black",
+ color: "ui.typography.body",
height: { base: "32px", md: "22px" },
- fontSize: "text.tag",
+ fontSize: "desktop.caption",
minHeight: "22px",
_dark: {
color: "dark.ui.typography.heading",
@@ -63,7 +63,7 @@ const TagSetExplore = {
borderRadius: "pill",
color: "ui.link.primary",
cursor: "pointer",
- fontSize: "text.tag",
+ fontSize: "desktop.caption",
height: { base: "32px", md: "22px" },
minHeight: "22px",
maxWidth: "200px",
diff --git a/src/theme/components/template.ts b/src/theme/components/template.ts
index 57ab850e11..68a858640c 100644
--- a/src/theme/components/template.ts
+++ b/src/theme/components/template.ts
@@ -5,7 +5,7 @@
const Template = {
baseStyle: {
boxSizing: "border-box",
- color: "ui.black",
+ color: "ui.typography.body",
display: "grid",
gridTemplateColumns: `
1fr
diff --git a/src/theme/components/text.ts b/src/theme/components/text.ts
index 888c69b3aa..5702a79b22 100644
--- a/src/theme/components/text.ts
+++ b/src/theme/components/text.ts
@@ -21,24 +21,24 @@ const variants = {
overline1: {
fontSize: "desktop.overline.overline1",
fontWeight: "overline.overline1",
- lineHeight: 1.35,
+ lineHeight: 1,
textTransform: "uppercase",
},
overline2: {
fontSize: "desktop.overline.overline2",
fontWeight: "overline.overline2",
- lineHeight: 1.4,
+ lineHeight: 1,
textTransform: "uppercase",
},
subtitle1: {
fontSize: "desktop.subtitle.subtitle1",
fontWeight: "subtitle.subtitle1",
- lineHeight: 1.25,
+ lineHeight: 1.35,
},
subtitle2: {
fontSize: "desktop.subtitle.subtitle2",
fontWeight: "subtitle.subtitle2",
- lineHeight: 1.3,
+ lineHeight: 1.4,
},
// Deprecated options
tag: {
diff --git a/src/theme/components/textInput.ts b/src/theme/components/textInput.ts
index 25b270670d..aa3ee17d6d 100644
--- a/src/theme/components/textInput.ts
+++ b/src/theme/components/textInput.ts
@@ -8,14 +8,14 @@ import {
const input = {
bgColor: "ui.white",
border: "1px solid",
- borderColor: "ui.gray.medium",
+ borderColor: "ui.border.default",
borderRadius: "sm",
- fontSize: "text.caption",
+ fontSize: "desktop.body.body2",
minHeight: { base: defaultElementSizes.mobileFieldHeight, md: "auto" },
py: "inset.narrow",
px: "inset.default",
_hover: {
- borderColor: "ui.gray.dark",
+ borderColor: "ui.border.hover",
},
_disabled: {
...selectTextInputDisabledStyles,
diff --git a/src/theme/components/tooltip.ts b/src/theme/components/tooltip.ts
index fd748e2a03..76e8c8bb69 100644
--- a/src/theme/components/tooltip.ts
+++ b/src/theme/components/tooltip.ts
@@ -7,14 +7,15 @@ const Tooltip = {
[$bg.variable]: "colors.ui.gray.xx-dark",
borderRadius: "4px",
boxShadow: "none",
- color: "ui.white",
- fontSize: "text.tag",
+ color: "ui.typography.inverse.body",
+ fontSize: "desktop.caption",
marginBottom: "xxs",
maxWidth: "240px",
px: "s",
py: "xs",
_dark: {
[$bg.variable]: "colors.ui.gray.x-dark",
+ color: "dark.ui.typography.heading",
},
},
};
diff --git a/src/theme/foundations/colors.ts b/src/theme/foundations/colors.ts
index 6957f6cbf7..daafe7a3e2 100644
--- a/src/theme/foundations/colors.ts
+++ b/src/theme/foundations/colors.ts
@@ -3,7 +3,7 @@ import { hexToRGB } from "../../utils/utils";
/**
* All colors can be found in Storybook:
- * https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/docs/style-guide-colors--docs
+ * https://nypl.github.io/nypl-design-system/reservoir/v2/?path=/docs/style-guide-colors--docs
*
* All UI Fills colors can be found in Figma:
* https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=47083%3A27674
@@ -34,8 +34,9 @@ const graySemiMedium = "#D9D9D9";
const grayLightCool = "#E9E9E9";
const grayxLightCool = "#F5F5F5";
const grayxxLightCool = "#FAFAFA";
-const linkPrimary = "#0576D3";
+const linkPrimary = "#0069BF";
const linkSecondary = "#004B98";
+const linkTertiary = "#551A8B";
const brandPrimary = "#C60917";
const brandSecondary = "#760000";
const blogsPrimary = grayLightCool;
@@ -161,7 +162,9 @@ const colors: Colors = {
link: {
primary: linkPrimary,
"primary-05": hexToRGB(linkPrimary, 0.05),
+ "primary-10": hexToRGB(linkPrimary, 0.1),
secondary: linkSecondary,
+ tertiary: linkTertiary,
},
status: {
primary: "#F9E08E",
@@ -187,11 +190,11 @@ const colors: Colors = {
hover: grayDark,
},
typography: {
- heading: black,
- body: black,
+ heading: grayxxxxDark,
+ body: grayxxDark,
inverse: {
- heading: white,
- body: white,
+ heading: grayLightCool,
+ body: grayMedium,
},
},
// Grayscale
@@ -242,6 +245,7 @@ const colors: Colors = {
"primary-05": hexToRGB("#79B7EB", 0.05),
"primary-10": hexToRGB("#79B7EB", 0.1),
secondary: "#95CFFF",
+ tertiary: "#B583E1",
},
status: {
primary: "#B69C46",
@@ -271,8 +275,8 @@ const colors: Colors = {
heading: grayLightCool,
body: grayMedium,
inverse: {
- heading: grayxxxDark,
- body: grayxxxDark,
+ heading: grayxxxxDark,
+ body: grayxxDark,
},
},
},
@@ -385,18 +389,18 @@ const colors: Colors = {
800: "#066014",
900: "#03300A",
},
- /** based on ui.link.primary = #0576D3 */
+ /** based on ui.link.primary = #0069BF */
blue: {
- 50: "#E6F3FE",
- 100: "#B9DFFD",
- 200: "#8CCAFC",
- 300: "#60B5FB",
- 400: "#33A0FA",
- 500: "#068BF9",
- 600: "#056FC7",
- 700: "#045495",
- 800: "#023864",
- 900: "#011C32",
+ 50: "#E6F0F9",
+ 100: "#ACCEEA",
+ 200: "#73ADDC",
+ 300: "#398BCD",
+ 400: "#0069BF",
+ 500: "#0058A0",
+ 600: "#004782",
+ 700: "#003763",
+ 800: "#002645",
+ 900: "#73ADDC",
},
};
diff --git a/src/theme/foundations/global.ts b/src/theme/foundations/global.ts
index 961a713ee1..f2c6d43d32 100644
--- a/src/theme/foundations/global.ts
+++ b/src/theme/foundations/global.ts
@@ -10,10 +10,10 @@ const global = {
body: {
boxSizing: "border-box",
bg: "ui.white",
- color: "ui.black",
+ color: "ui.typography.body",
fontFamily: "body",
- fontSize: "text.default",
- fontWeight: "text.default",
+ fontSize: "desktop.body.body1",
+ fontWeight: "body.body1",
lineHeight: "1.5",
overflowX: "hidden",
_dark: {
diff --git a/src/theme/foundations/typography.ts b/src/theme/foundations/typography.ts
index b57ed9ed8e..0b0acfb81e 100644
--- a/src/theme/foundations/typography.ts
+++ b/src/theme/foundations/typography.ts
@@ -215,6 +215,7 @@ const typography: Typography = {
bold: fontWeightValues["bold"],
// semantic tokens
body: {
+ default: fontWeightValues["light"],
body1: fontWeightValues["light"],
body2: fontWeightValues["light"],
},
diff --git a/src/theme/index.ts b/src/theme/index.ts
index 6602fcb7eb..ecf7273380 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -47,6 +47,7 @@ import CustomSlider from "./components/slider";
import StatusBadge from "./components/statusBadge";
import StructuredContent from "./components/structuredContent";
import StyledList from "./components/styledList";
+import SocialMediaLinks from "./components/socialmedialinks";
import Tabs from "./components/tabs";
import CustomTable from "./components/customTable";
import TagSetStyles from "./components/tagSet";
@@ -131,6 +132,7 @@ const theme: any = {
StatusBadge,
StructuredContent,
StyledList,
+ SocialMediaLinks,
Tabs,
CustomTable,
...TagSetStyles,
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 2598e1842a..f4872a8cd1 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -125,3 +125,9 @@ export const truncateText = (text: string, truncateTextLength: number = 60) => {
const updatedText = text.substring(0, truncateTextLength - 1);
return `${updatedText.substring(0, updatedText.lastIndexOf(" "))}...`;
};
+
+/** Prepare a string for use in an ID or class attribute */
+export const sanitizeStringForAttribute = (str: string) => {
+ const sanitizedStr = str.replace(/[^a-z0-9]/gi, "-").toLowerCase();
+ return sanitizedStr;
+};