@biblioteksentralen/react 1.0.0-beta.1

package/src/styles/chakraTheme/InputStyles.ts

@@ -0,0 +1,41 @@
+import { ComponentStyleConfig } from "@chakra-ui/theme";
+import { mode } from "@chakra-ui/theme-tools";
+
+export const InputStyles: ComponentStyleConfig = {
+  baseStyle: (props) => ({
+    field: {
+      _placeholder: {
+        color: mode("gray.500", "whiteAlpha.500")(props),
+      },
+    },
+  }),
+  variants: {
+    filled: (props) => ({
+      field: {
+        bg: mode("gray.200", "whiteAlpha.100")(props),
+        _hover: {
+          bg: mode("gray.300", "whiteAlpha.200")(props),
+        },
+      },
+    }),
+    outline: (props) => ({
+      field: {
+        borderColor: mode("gray.300", "whiteAlpha.300")(props),
+        _hover: {
+          borderColor: mode("gray.400", "whiteAlpha.400")(props),
+        },
+      },
+    }),
+    flushed: (props) => ({
+      field: {
+        borderColor: mode("gray.300", "whiteAlpha.300")(props),
+        _hover: {
+          borderColor: mode("gray.400", "whiteAlpha.400")(props),
+        },
+      },
+    }),
+  },
+  defaultProps: {
+    variant: "filled",
+  },
+};

package/src/styles/chakraTheme/LinkStyles.ts

@@ -0,0 +1,23 @@
+import { ComponentStyleConfig } from "@chakra-ui/theme";
+import { SystemStyleInterpolation } from "@chakra-ui/theme-tools";
+
+export type CustomLinkVariants = "plain";
+
+const variants: Record<CustomLinkVariants, SystemStyleInterpolation> = {
+  plain: {
+    textDecoration: "none",
+    _hover: {
+      textDecoration: "underline",
+    },
+  },
+};
+
+export const LinkStyles: ComponentStyleConfig = {
+  baseStyle: {
+    textDecoration: "underline",
+    _hover: {
+      textDecoration: "none",
+    },
+  },
+  variants: variants,
+};

package/src/styles/chakraTheme/ModalStyles.ts

@@ -0,0 +1,12 @@
+import { ComponentStyleConfig } from "@chakra-ui/theme";
+
+export const ModalStyles: ComponentStyleConfig = {
+  baseStyle: {
+    // Fix for modal height on Safari iOS:
+    // https://github.com/chakra-ui/chakra-ui/issues/4680#issuecomment-1301640929
+    dialogContainer: {
+      "@supports(height: -webkit-fill-available)": {},
+      height: "100%",
+    },
+  },
+};

package/src/styles/chakraTheme/SpinnerStyles.ts

@@ -0,0 +1,13 @@
+import { colors } from "@biblioteksentralen/utils";
+import { Spinner } from "@chakra-ui/react";
+import { ComponentStyleConfig } from "@chakra-ui/theme";
+
+export const SpinnerStyles: ComponentStyleConfig = {};
+
+Spinner.defaultProps = {
+  ...Spinner.defaultProps,
+  speed: ".8s",
+  color: colors.accentBlueMedium,
+  emptyColor: "rgba(0,0,0,.2)",
+  thickness: ".175em",
+};

package/src/styles/chakraTheme/biblioteksentralenChakraTheme.ts

@@ -0,0 +1,34 @@
+import { ChakraTheme } from "@chakra-ui/theme";
+import { ButtonStyles } from "./ButtonStyles";
+import { CheckboxStyles } from "./CheckboxStyles";
+import { ContainerStyles } from "./ContainerStyles";
+import { HeadingStyles } from "./HeadingStyles";
+import { InputStyles } from "./InputStyles";
+import { LinkStyles } from "./LinkStyles";
+import { ModalStyles } from "./ModalStyles";
+import { SpinnerStyles } from "./SpinnerStyles";
+import { sizes } from "./sizes";
+
+export const biblioteksentralenChakraTheme: Partial<ChakraTheme> = {
+  styles: {
+    global: {
+      html: {
+        fontSize: { base: "112.5%", md: "120%" },
+        // Sørger for smooth scrolling for interne lenker som scroller til annet sted på siden,
+        // men ikke hvis fokus er utenfor viduet, feks ved søk i tekst (ctrl + f)
+        "&:focus-within": { scrollBehavior: "smooth !important" },
+      },
+    },
+  },
+  components: {
+    Heading: HeadingStyles,
+    Spinner: SpinnerStyles,
+    Link: LinkStyles,
+    Button: ButtonStyles,
+    Input: InputStyles,
+    Container: ContainerStyles,
+    Modal: ModalStyles,
+    Checkbox: CheckboxStyles,
+  },
+  sizes,
+};

package/src/styles/chakraTheme/sizes.ts

@@ -0,0 +1,10 @@
+const container = {
+  sm: "40rem",
+  md: "48rem",
+  lg: "56rem", // Forsøker 56rem som standardbredde etter testing med Katrine
+  xl: "80rem",
+};
+
+export const sizes = {
+  container,
+};

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "noEmit": false,
+    "outDir": "./dist"
+  },
+  "include": ["./src/**/*.ts", "./src/**/*.tsx"]
+}