Test drive themes.

Author: mathewjordan

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-pnpm exec lint-staged
+# pnpm exec lint-staged

docs/components/DynamicImports/Viewer.tsx

@@ -5,6 +5,7 @@ import {
 import dynamic from "next/dynamic";
 import { isDark } from "docs/lib/theme";
 import { useRouter } from "next/router";
+import { Theme } from "@radix-ui/themes";
 
 // todo: set this as a constant somewhere?
 const defaultIiifContent =

package.json

@@ -79,6 +79,7 @@
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.4",
+    "@radix-ui/themes": "^3.0.2",
     "@stitches/react": "^1.2.8",
     "flexsearch": "^0.7.43",
     "hls.js": "^1.5.3",

pages/docs/image.mdx

@@ -14,7 +14,12 @@ A UI component the renders a pan and deep-zoom Image viewer using [OpenSeadragon
 
 <IIIFBadge href="https://iiif.io/api/image/3.0" text={["Image"]} />
 
-<div style={{ height: "38.2vh", minHeight: "450px" }}>
+<div
+  style={{
+    height: "38.2vh",
+    minHeight: "450px",
+  }}
+>
   <CloverImage
     body={{
       id: "https://iiif.dc.library.northwestern.edu/iiif/2/6ca016c5-de7f-4373-ae8f-7047fecf6ace/full/600,/0/default.jpg",

pnpm-lock.yaml

@@ -1,49 +1,18 @@
+import { IconButton } from "@radix-ui/themes";
 import { styled } from "src/styles/stitches.config";
 
-const Item = styled("button", {
-  display: "flex",
-  height: "2rem",
-  width: "2rem",
-  borderRadius: "2rem",
-  padding: "0",
-  margin: "0",
-  fontFamily: "inherit",
-  background: "none",
-  backgroundColor: "$primary",
-  border: "none",
-  color: "white",
+const Item = styled(IconButton, {
   cursor: "pointer",
-  marginLeft: "0.618rem",
-  filter: "drop-shadow(2px 2px 5px #0003)",
-  transition: "$all",
-  boxSizing: "content-box !important",
-
-  "&:first-child": {
-    marginLeft: "0",
-  },
-
-  "@xs": {
-    marginBottom: "0.618rem",
-    marginLeft: "0",
-
-    "&:last-child": {
-      marginBottom: "0",
-    },
-  },
+  alignContent: "center",
+  display: "inline-flex !important",
 
   svg: {
+    color: "currentColor",
+    fill: "currentColor",
+    stroke: "currentColor",
+    transition: "$all",
     height: "60%",
     width: "60%",
-    padding: "20%",
-    fill: "$secondary",
-    stroke: "$secondary",
-    filter: "drop-shadow(2px 2px 5px #0003)",
-    transition: "$all",
-    boxSizing: "inherit",
-  },
-
-  "&:hover, &:focus": {
-    backgroundColor: "$accent",
   },
 
   "&[data-button=rotate-right]": {

src/components/Image/Controls/Button.styled.tsx

@@ -16,14 +16,14 @@ const Button: React.FC<ButtonProps> = ({ className, id, label, children }) => {
       className={className}
       data-testid="openseadragon-button"
       data-button={dataButton}
+      size="2"
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
         aria-labelledby={`${id}-svg-title`}
         data-testid="openseadragon-button-svg"
         focusable="false"
         viewBox="0 0 512 512"
-        role="img"
       >
         <title id={`${id}-svg-title`}>{label}</title>
         {children}

src/components/Image/Controls/Button.tsx

@@ -1,11 +1,11 @@
+import { Flex } from "@radix-ui/themes";
 import { styled } from "src/styles/stitches.config";
 
-const Wrapper = styled("div", {
+const Wrapper = styled(Flex, {
   position: "absolute",
   zIndex: "1",
   top: "1rem",
   right: "1rem",
-  display: "flex",
 
   "@xs": {
     flexDirection: "column",

src/components/Image/Controls/Controls.styled.tsx

@@ -70,6 +70,7 @@ const Controls = ({
     <Wrapper
       data-testid="clover-iiif-image-openseadragon-controls"
       hasPlaceholder={_cloverViewerHasPlaceholder}
+      gap="2"
     >
       {config.showZoomControl && (
         <>

src/components/Image/Controls/Controls.tsx

@@ -8,12 +8,11 @@ const Navigator = styled("div", {
   width: "161.8px",
   height: "100px",
   backgroundColor: "#000D",
-  boxShadow: "5px 5px 5px #0002",
-  borderRadius: "3px",
+  boxShadow: "var(--shadow-3)",
 
   ".displayregion": {
-    border: " 3px solid $accent !important",
-    boxShadow: "0 0 3px #0006",
+    border: " 2px solid var(--accent-10) !important",
+    boxShadow: "var(--shadow-3)",
   },
 
   "@sm": {
@@ -28,16 +27,14 @@ const Navigator = styled("div", {
 });
 
 const Viewport = styled("div", {
-  position: "relative",
+  position: "absolute",
   width: "100%",
   height: "100%",
   zIndex: "0",
 });
 
 const Wrapper = styled("div", {
-  width: "100%",
-  height: "100%",
-  maxHeight: "100vh",
+  objectFit: "cover",
   background: "transparent",
   backgroundSize: "contain",
   color: "white",

src/components/Image/Image.styled.tsx

@@ -1,3 +1,5 @@
+import "@radix-ui/themes/styles.css";
+
 import { parseImageBody, parseSrc } from "src/lib/openseadragon-helpers";
 
 import { ErrorBoundary } from "react-error-boundary";
@@ -7,6 +9,7 @@ import { LabeledIIIFExternalWebResource } from "src/types/presentation-3";
 import OSD from "src/components/Image/OSD/OSD";
 import { Options } from "openseadragon";
 import React from "react";
+import { Theme } from "@radix-ui/themes";
 import defaultOpenSeadragonConfig from "src/components/Image/OSD/defaults";
 import { getLabelAsString } from "src/lib/label-helpers";
 import { v4 as uuidv4 } from "uuid";
@@ -47,15 +50,17 @@ const CloverImage: React.FC<CloverImageProps> = ({
 
   return (
     <ErrorBoundary FallbackComponent={ErrorFallback}>
-      <OSD
-        _cloverViewerHasPlaceholder={_cloverViewerHasPlaceholder}
-        ariaLabel={ariaLabel}
-        config={config}
-        imageType={imageType}
-        key={instance}
-        uri={uri}
-        openSeadragonCallback={openSeadragonCallback}
-      />
+      <Theme style={{ width: "100%", height: "100% !important" }}>
+        <OSD
+          _cloverViewerHasPlaceholder={_cloverViewerHasPlaceholder}
+          ariaLabel={ariaLabel}
+          config={config}
+          imageType={imageType}
+          key={instance}
+          uri={uri}
+          openSeadragonCallback={openSeadragonCallback}
+        />
+      </Theme>
     </ErrorBoundary>
   );
 };

src/components/Image/index.tsx

@@ -7,10 +7,11 @@ import { createMarkup, sanitizeAttributes } from "src/lib/html-element";
 
 import { PrimitivesMarkup } from "src/types/primitives";
 import React from "react";
+import { Text } from "@radix-ui/themes";
 import { getLabelAsString } from "src/lib/label-helpers";
 import { styled } from "src/styles/stitches.config";
 
-const StyledMarkup = styled("span", {});
+const StyledMarkup = styled(Text, {});
 
 const Markup: React.FC<PrimitivesMarkup> = (props) => {
   const { as, markup } = props;

src/components/Primitives/Markup/Markup.tsx

@@ -1,8 +1,9 @@
-import React from "react";
+import CustomValue from "../Value/CustomValue";
+import { DataList } from "@radix-ui/themes";
 import Label from "../Label/Label";
-import Value from "../Value/Value";
 import { PrimitivesMetadataItem } from "src/types/primitives";
-import CustomValue from "../Value/CustomValue";
+import React from "react";
+import Value from "../Value/Value";
 import { getLabelAsString } from "src/lib/label-helpers";
 
 const MetadataItem: React.FC<PrimitivesMetadataItem> = (props) => {
@@ -17,19 +18,19 @@ const MetadataItem: React.FC<PrimitivesMetadataItem> = (props) => {
     .toLowerCase();
 
   return (
-    <div role="group" data-label={dataAttribute}>
-      <Label as="dt" label={label} lang={lang} />
+    <DataList.Item role="group" data-label={dataAttribute}>
+      <Label as={DataList.Label} label={label} lang={lang} />
       {customValueContent ? (
         <CustomValue
-          as="dd"
+          as={DataList.Value}
           customValueContent={customValueContent}
           value={value}
           lang={lang}
         />
       ) : (
         <Value as="dd" value={value} lang={lang} />
       )}
-    </div>
+    </DataList.Item>
   );
 };
 

src/components/Primitives/Metadata/Item.tsx

@@ -1,3 +1,4 @@
+import { DataList } from "@radix-ui/themes";
 import MetadataItem from "src/components/Primitives/Metadata/Item";
 import { PrimitivesMetadata } from "src/types/primitives";
 import { PrimitivesProvider } from "src/context/primitives-context";
@@ -34,7 +35,7 @@ const Metadata: React.FC<PrimitivesMetadata> = (props) => {
         : undefined)}
     >
       {metadata.length > 0 && (
-        <StyledMetadata as={as} {...attributes}>
+        <DataList.Root orientation="vertical" {...attributes}>
           {metadata.map((item, index) => {
             const customValue = customValueContent
               ? parseCustomContent(item.label, customValueContent)
@@ -49,7 +50,7 @@ const Metadata: React.FC<PrimitivesMetadata> = (props) => {
               />
             );
           })}
-        </StyledMetadata>
+        </DataList.Root>
       )}
     </PrimitivesProvider>
   );

src/components/Primitives/Metadata/Metadata.tsx

@@ -1,3 +1,4 @@
+import { DataList } from "@radix-ui/themes";
 import MetadataItem from "src/components/Primitives/Metadata/Item";
 import { PrimitivesProvider } from "src/context/primitives-context";
 import { PrimitivesRequiredStatement } from "src/types/primitives";
@@ -6,7 +7,7 @@ import { getRealPropertyValue } from "src/lib/utils";
 import { sanitizeAttributes } from "src/lib/html-element";
 import { styled } from "src/styles/stitches.config";
 
-const StyledRequiredStatement = styled("dl", {});
+const StyledRequiredStatement = styled(DataList.Root, {});
 
 const RequiredStatement: React.FC<PrimitivesRequiredStatement> = (props) => {
   const { as, requiredStatement } = props;
@@ -27,7 +28,7 @@ const RequiredStatement: React.FC<PrimitivesRequiredStatement> = (props) => {
         ? { initialState: { delimiter: delimiter as string } }
         : undefined)}
     >
-      <StyledRequiredStatement as={as} {...attributes}>
+      <StyledRequiredStatement orientation="vertical" {...attributes}>
         <MetadataItem item={requiredStatement} lang={attributes.lang} />
       </StyledRequiredStatement>
     </PrimitivesProvider>

src/components/Primitives/RequiredStatement/RequiredStatement.tsx

@@ -1,11 +1,12 @@
 import React, { Fragment, cloneElement } from "react";
 
+import { DataList } from "@radix-ui/themes";
 import { PrimitivesCustomValue } from "src/types/primitives";
 import { getLabelEntries } from "src/lib/label-helpers";
 import { styled } from "src/styles/stitches.config";
 import { usePrimitivesContext } from "src/context/primitives-context";
 
-const StyledCustomValue = styled("span", {});
+const StyledCustomValue = styled(DataList.Value, {});
 
 const CustomValue: React.FC<PrimitivesCustomValue> = ({
   as = "dd",

src/components/Primitives/Value/CustomValue.tsx

@@ -1,6 +1,6 @@
-import React from "react";
-import { PrimitivesValue } from "src/types/primitives";
 import Markup from "src/components/Primitives/Markup/Markup";
+import { PrimitivesValue } from "src/types/primitives";
+import React from "react";
 
 const Value: React.FC<PrimitivesValue> = ({ as = "dd", lang, value }) => (
   <Markup markup={value} as={as} lang={lang} />

src/components/Primitives/Value/Value.tsx

@@ -8,7 +8,6 @@ export const Tag = styled("div", {
   // Custom
   display: "inline-flex",
   alignItems: "center",
-  borderRadius: "5px",
   padding: "$1",
   marginBottom: "$2",
   marginRight: "$2",