Add modals from Tobira

package.json

@@ -18,13 +18,15 @@
     "prepare": "npm run build"
   },
   "devDependencies": {
-    "@opencast/eslint-config-ts-react": "^0.1.0",
+    "@opencast/eslint-config-ts-react": "^0.2.0",
     "@types/react": "^18.2.13",
+    "@types/react-dom": "^18.2.19",
     "typescript": "^5.1.3"
   },
   "peerDependencies": {
-    "@emotion/react": "^11.11.1",
+    "@emotion/react": "^11.11.4",
     "@floating-ui/react": "^0.24.3",
+    "focus-trap-react": "^10.2.3",
     "react": "^18.2.0",
     "react-icons": "^4.9.0",
     "react-merge-refs": "^2.0.2"

src/button.tsx

@@ -1,4 +1,6 @@
 import React from "react";
+import { Interpolation, Theme } from "@emotion/react";
+import { AppkitConfig, focusStyle, match, useAppkitConfig, useColorScheme } from ".";
 
 /**
  * A mostly unstyled button used to build buttons. Always use this instead of
@@ -20,3 +22,93 @@ export const ProtoButton = React.forwardRef<HTMLButtonElement, JSX.IntrinsicElem
     {...rest}
   >{children}</button>,
 );
+
+/** The kind of buttons a "Button" can be. Used for styling */
+export type Kind = "normal" | "danger" | "call-to-action";
+
+type ButtonProps = JSX.IntrinsicElements["button"] & {
+    kind?: Kind;
+    extraCss?: Interpolation<Theme>;
+};
+
+/** A styled button */
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ kind = "normal", extraCss, children, ...rest }, ref) => {
+    const config = useAppkitConfig();
+    const { isHighContrast } = useColorScheme();
+
+    return (
+      <button ref={ref} type="button" css={css(config, kind, isHighContrast, extraCss)} {...rest}>{children}</button>
+    );
+  },
+);
+
+/**
+ * Returns css for different types of buttons.
+ */
+const css = (
+  config: AppkitConfig,
+  kind: Kind,
+  isHighContrast: boolean,
+  extraCss: Interpolation<Theme> = {}
+): Interpolation<Theme> => {
+  const notDisabledStyle = match(kind, {
+    "normal": () => ({
+      border: `1px solid ${config.colors.neutral40}`,
+      color: config.colors.neutral90,
+      "&:hover, &:focus-visible": {
+        border: `1px solid ${config.colors.neutral60}`,
+        backgroundColor: config.colors.neutral15,
+      },
+    }),
+
+    "danger": () => ({
+      border: `1px solid ${config.colors.danger4}`,
+      color: config.colors.danger4,
+      fontWeight: isHighContrast ? "bold" : "inherit",
+      "&:hover, &:focus-visible": {
+        border: `1px solid ${config.colors.danger5}`,
+        backgroundColor: config.colors.danger4,
+        color: config.colors.danger4BwInverted,
+      },
+    }),
+
+    "call-to-action": () => ({
+      border: `1px solid ${config.colors.happy8}`,
+      color: config.colors.happy7BwInverted,
+      backgroundColor: config.colors.happy7,
+      "&:hover, &:focus-visible": {
+        border: `1px solid ${config.colors.happy9}`,
+        backgroundColor: config.colors.happy8,
+        color: config.colors.happy8BwInverted,
+      },
+    }),
+  });
+
+  return {
+    borderRadius: 8,
+    display: "inline-flex",
+    alignItems: "center",
+    padding: "7px 14px",
+    gap: 12,
+    whiteSpace: "nowrap",
+    backgroundColor: config.colors.neutral10,
+    transition: "background-color 0.15s, border-color 0.15s",
+    textDecoration: "none",
+    "& > svg": {
+      fontSize: 20,
+    },
+    "&:disabled": {
+      border: `1px solid ${config.colors.neutral25}`,
+      color: config.colors.neutral40,
+    },
+    "&:not([disabled])": {
+      cursor: "pointer",
+      ...notDisabledStyle,
+      ...focusStyle(config, { offset: -1 }),
+    },
+    ...extraCss as Record<string, unknown>,
+  };
+};
+
+export const buttonStyle = css;

src/card.tsx

@@ -0,0 +1,47 @@
+import { LuAlertTriangle, LuInfo } from "react-icons/lu";
+import { match, useAppkitConfig } from ".";
+
+
+type Props = JSX.IntrinsicElements["div"] & {
+    kind: "error" | "info";
+    iconPos?: "left" | "top";
+};
+
+/** A styled container for different purposes */
+export const Card: React.FC<Props> = ({ kind, iconPos = "left", children, ...rest }) => {
+  const config = useAppkitConfig();
+
+  return (
+    <div
+      css={{
+        display: "inline-flex",
+        flexDirection: iconPos === "left" ? "row" : "column",
+        borderRadius: 4,
+        padding: "8px 16px",
+        gap: 16,
+        alignItems: "center",
+        "& > svg": {
+          fontSize: 24,
+          minWidth: 24,
+        },
+        ...match(kind, {
+          "error": () => ({
+            backgroundColor: config.colors.danger0,
+            border: `1.5px solid ${config.colors.danger0}`,
+            color: config.colors.danger0BwInverted,
+          }) as Record<string, string>,
+          "info": () => ({
+            backgroundColor: config.colors.neutral10,
+          }),
+        }),
+      }}
+      {...rest}
+    >
+      {match(kind, {
+        "error": () => <LuAlertTriangle />,
+        "info": () => <LuInfo css={{ color: config.colors.neutral60 }} />,
+      })}
+      <div>{children}</div>
+    </div>
+  );
+};

src/colors.css

@@ -14,17 +14,28 @@ html[data-color-scheme="light"], html:not([data-color-scheme]) {
   --color-neutral90: #181818;
 
   --color-danger0: #feedeb;
+  --color-danger0-bw-inverted: #000;
   --color-danger1: #ffd2cd;
+  --color-danger1-bw-inverted: #000;
   --color-danger2: #feaba1;
+  --color-danger2-bw-inverted: #000;
   --color-danger4: #c22a2c;
+  --color-danger4-bw-inverted: #fff;
   --color-danger5: #880e11;
+  --color-danger5-bw-inverted: #fff;
 
   --color-accent9: #044a81;
+  --color-accent9-bw-inverted: #fff;
   --color-accent8: #215D99;
+  --color-accent8-bw-inverted: #fff;
   --color-accent7: #3073B8;
+  --color-accent7-bw-inverted: #fff;
   --color-accent6: #3E8AD8;
+  --color-accent6-bw-inverted: #000;
   --color-accent5: #4DA1F7;
+  --color-accent5-bw-inverted: #000;
   --color-accent4: #71B4F9;
+  --color-accent4-bw-inverted: #000;
 
   --color-focus: #215D99;
   color-scheme: light;
@@ -46,17 +57,28 @@ html[data-color-scheme="dark"] {
   --color-neutral90: #c4c4c4;
 
   --color-danger0: #361314;
+  --color-danger0-bw-inverted: #fff;
   --color-danger1: #462522;
+  --color-danger1-bw-inverted: #fff;
   --color-danger2: #712f2a;
-  --color-danger4: #e0584d;
-  --color-danger5: #fb7c67;
+  --color-danger2-bw-inverted: #fff;
+  --color-danger4: #f2685b;
+  --color-danger4-bw-inverted: #000;
+  --color-danger5: #ff9581;
+  --color-danger5-bw-inverted: #000;
 
   --color-accent9: #85ace3;
+  --color-accent9-bw-inverted: #000;
   --color-accent8: #7da4db;
+  --color-accent8-bw-inverted: #000;
   --color-accent7: #588ccd;
+  --color-accent7-bw-inverted: #000;
   --color-accent6: #1f72ba;
+  --color-accent6-bw-inverted: #fff;
   --color-accent5: #1c619e;
+  --color-accent5-bw-inverted: #fff;
   --color-accent4: #195483;
+  --color-accent4-bw-inverted: #fff;
 
   --color-focus: #B8D9FC;
   color-scheme: dark;
@@ -78,16 +100,28 @@ html[data-color-scheme="light-high-contrast"] {
   --color-neutral90: #000;
 
   --color-danger0: #fff;
+  --color-danger0-bw-inverted: #000;
   --color-danger1: #fff;
+  --color-danger1-bw-inverted: #000;
   --color-danger2: #a50613;
+  --color-danger2-bw-inverted: #fff;
   --color-danger4: #a50613;
+  --color-danger4-bw-inverted: #fff;
   --color-danger5: #a50613;
+  --color-danger5-bw-inverted: #fff;
 
+  --color-accent9: #000099;
+  --color-accent9-bw-inverted: #fff;
   --color-accent8: #000099;
+  --color-accent8-bw-inverted: #fff;
   --color-accent7: #000099;
+  --color-accent7-bw-inverted: #fff;
   --color-accent6: #000099;
+  --color-accent6-bw-inverted: #fff;
   --color-accent5: #000099;
+  --color-accent5-bw-inverted: #fff;
   --color-accent4: #000099;
+  --color-accent4-bw-inverted: #fff;
 
   --color-focus: #000099;
   color-scheme: light;
@@ -109,16 +143,28 @@ html[data-color-scheme="dark-high-contrast"] {
   --color-neutral90: #fff;
 
   --color-danger0: #000;
+  --color-danger0-bw-inverted: #fff;
   --color-danger1: #000;
-  --color-danger2: #eb1722;
-  --color-danger4: #eb1722;
-  --color-danger5: #eb1722;
-
+  --color-danger1-bw-inverted: #fff;
+  --color-danger2: #ff9581;
+  --color-danger2-bw-inverted: #000;
+  --color-danger4: #ff9581;
+  --color-danger4-bw-inverted: #000;
+  --color-danger5: #ff9581;
+  --color-danger5-bw-inverted: #000;
+
+  --color-accent9: #a6ffea;
+  --color-accent9-bw-inverted: #000;
   --color-accent8: #a6ffea;
+  --color-accent8-bw-inverted: #000;
   --color-accent7: #a6ffea;
+  --color-accent7-bw-inverted: #000;
   --color-accent6: #a6ffea;
+  --color-accent6-bw-inverted: #000;
   --color-accent5: #a6ffea;
+  --color-accent5-bw-inverted: #000;
   --color-accent4: #a6ffea;
+  --color-accent4-bw-inverted: #000;
 
   --color-focus: #a6ffea;
   color-scheme: dark;

src/config.tsx

@@ -28,16 +28,41 @@ export type ColorConfig = {
   neutral90: string,
 
   danger0: string,
+  danger0BwInverted: string,
   danger1: string,
+  danger1BwInverted: string,
   danger2: string,
+  danger2BwInverted: string,
   danger4: string,
+  danger4BwInverted: string,
   danger5: string,
-
+  danger5BwInverted: string,
+
+  happy4: string;
+  happy4BwInverted: string;
+  happy5: string;
+  happy5BwInverted: string;
+  happy6: string;
+  happy6BwInverted: string;
+  happy7: string;
+  happy7BwInverted: string;
+  happy8: string;
+  happy8BwInverted: string;
+  happy9: string;
+  happy9BwInverted: string;
+
+  accent9: string;
+  accent9BwInverted: string;
   accent8: string;
+  accent8BwInverted: string;
   accent7: string;
+  accent7BwInverted: string;
   accent6: string;
+  accent6BwInverted: string;
   accent5: string;
+  accent5BwInverted: string;
   accent4: string;
+  accent4BwInverted: string;
 
   focus: string;
 };
@@ -59,16 +84,41 @@ export const DEFAULT_CONFIG: AppkitConfig = {
     neutral90: "var(--color-neutral90)",
 
     danger0: "var(--color-danger0)",
+    danger0BwInverted: "var(--color-danger0-bw-inverted)",
     danger1: "var(--color-danger1)",
+    danger1BwInverted: "var(--color-danger1-bw-inverted)",
     danger2: "var(--color-danger2)",
+    danger2BwInverted: "var(--color-danger2-bw-inverted)",
     danger4: "var(--color-danger4)",
+    danger4BwInverted: "var(--color-danger4-bw-inverted)",
     danger5: "var(--color-danger5)",
-
+    danger5BwInverted: "var(--color-danger5-bw-inverted)",
+
+    happy4: "var(--color-accent4)",
+    happy4BwInverted: "var(--color-accent4-bw-inverted)",
+    happy5: "var(--color-accent5)",
+    happy5BwInverted: "var(--color-accent5-bw-inverted)",
+    happy6: "var(--color-accent6)",
+    happy6BwInverted: "var(--color-accent6-bw-inverted)",
+    happy7: "var(--color-accent7)",
+    happy7BwInverted: "var(--color-accent7-bw-inverted)",
+    happy8: "var(--color-accent8)",
+    happy8BwInverted: "var(--color-accent8-bw-inverted)",
+    happy9: "var(--color-accent9)",
+    happy9BwInverted: "var(--color-accent9-bw-inverted)",
+
+    accent9: "var(--color-accent9)",
+    accent9BwInverted: "var(--color-accent9-bw-inverted)",
     accent8: "var(--color-accent8)",
+    accent8BwInverted: "var(--color-accent8-bw-inverted)",
     accent7: "var(--color-accent7)",
+    accent7BwInverted: "var(--color-accent7-bw-inverted)",
     accent6: "var(--color-accent6)",
+    accent6BwInverted: "var(--color-accent6-bw-inverted)",
     accent5: "var(--color-accent5)",
+    accent5BwInverted: "var(--color-accent5-bw-inverted)",
     accent4: "var(--color-accent4)",
+    accent4BwInverted: "var(--color-accent4-bw-inverted)",
 
     focus: "var(--color-accent8)",
   },