onekijs-ui 0.9.2 → 0.15.2

package/src/theme/base.tsx

@@ -0,0 +1,507 @@
+import { FCC, get, set, simpleMergeDeep } from 'onekijs-framework';
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+import { ColorKeys, Theme, ThemeProps } from '../styles/typings';
+import { darken, lighten } from '../utils/color';
+
+export const baseTheme = (customTheme: Partial<Theme> = {}): Theme => {
+  const theme: Partial<Theme> = {
+    breakpoints: {
+      xs: '576px',
+      sm: '768px',
+      md: '992px',
+      lg: '1200px',
+      xl: '1850px',
+    },
+    colors: {
+      white: 'white',
+      lightest: 'gray-100',
+      lighter: 'gray-200',
+      light: 'gray-400',
+      dark: 'gray-600',
+      darker: 'gray-700',
+      darkest: 'gray-900',
+      black: 'black',
+      success: 'green-500',
+      info: 'blue-500',
+      warning: 'yellow-500',
+      danger: 'red-500',
+      primary: 'blue-500',
+      secondary: 'blue-900',
+      blue: 'blue-500',
+      red: 'red-500',
+      purple: 'purple-500',
+      pink: 'pink-500',
+      indigo: 'indigo-500',
+      teal: 'teal-500',
+      orange: 'orange-500',
+      yellow: 'yellow-500',
+      green: 'green-500',
+      lightblue: 'blue-200',
+      lightred: 'red-200',
+      lightpurple: 'purple-200',
+      lightpink: 'pink-200',
+      lightindigo: 'indigo-200',
+      lightteal: 'teal-200',
+      lightorange: 'orange-200',
+      lightyellow: 'yellow-200',
+      lightgreen: 'green-200',
+      background: 'white',
+    },
+    palette: {},
+    spacings: {
+      none: '0',
+      '2xs': '0.125rem',
+      xs: '0.25rem',
+      sm: '0.5rem',
+      md: '0.75rem',
+      lg: '1rem',
+      xl: '1.25rem',
+      '2xl': '1.5rem',
+      '3xl': '2rem',
+      '4xl': '2.5rem',
+      '5xl': '3rem',
+      '6xl': '4rem',
+      '7xl': '5rem',
+      '8xl': '6rem',
+      '9xl': '8rem',
+      '10xl': '10rem',
+      '11xl': '12rem',
+      '12xl': '14rem',
+      '13xl': '16rem',
+      px: '1px',
+    },
+
+    font: {
+      families: {
+        sans: 'Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
+        serif: 'Georgia, Cambria, "Times New Roman", Times, serif',
+        mono: 'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+      },
+      lineHeights: {
+        none: 1,
+        xs: 1.25,
+        sm: 1.375,
+        md: 1.5,
+        lg: 1.625,
+        xl: 2,
+        '2xl': 2.5,
+        '3xl': 3,
+        '4xl': 4,
+      },
+      sizes: {
+        '2xs': '.625rem',
+        xs: '.75rem',
+        sm: '.875rem',
+        md: '1rem',
+        lg: '1.125rem',
+        xl: '1.25rem',
+        '2xl': '1.5rem',
+        '3xl': '1.875rem',
+        '4xl': '2.25rem',
+        '5xl': '3rem',
+        '6xl': '4rem',
+        default: '.0875rem',
+      },
+      spacings: {
+        xs: '-0.05em',
+        sm: '-0.025em',
+        md: 0,
+        lg: '0.025em',
+        xl: '0.05em',
+        '2xl': '0.1em',
+      },
+      weights: {
+        hairline: 100,
+        thin: 200,
+        light: 300,
+        normal: 400,
+        medium: 500,
+        semibold: 600,
+        bold: 700,
+        extrabold: 800,
+        black: 900,
+      },
+    },
+    radius: {
+      none: 0,
+      '2xs': '0.625rem',
+      xs: '0.125rem',
+      sm: '0.25rem',
+      md: '0.375rem',
+      lg: '0.5rem',
+      xl: '0.625rem',
+      full: '9999px',
+    },
+    shadow: {
+      default: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+      xs: '0 0 0 1px rgba(0, 0, 0, 0.05)',
+      sm: '1px 1px 5px hsl(198, 0%, 91%)',
+      md: ' 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+      lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+      xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+      '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
+      inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
+      outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',
+      none: 'none',
+    },
+
+    sizes: {
+      0: 0,
+      1: '0.25rem',
+      2: '0.5rem',
+      3: '0.75rem',
+      4: '1rem',
+      5: '1.25rem',
+      6: '1.5rem',
+      8: '2rem',
+      10: '2.5rem',
+      12: '3rem',
+      16: '4rem',
+      20: '5rem',
+      24: '6rem',
+      32: '8rem',
+      40: '10rem',
+      48: '12rem',
+      56: '14rem',
+      64: '16rem',
+      px: '1px',
+      xs: '20rem',
+      sm: '24rem',
+      md: '28rem',
+      lg: '32rem',
+      xl: '36rem',
+      '2xl': '42rem',
+      '3xl': '48rem',
+      '4xl': '56rem',
+      '5xl': '64rem',
+      '6xl': '72rem',
+      'screen-sm': '640px',
+      'screen-md': '768px',
+      'screen-lg': '1024px',
+      'screen-xl': '1280px',
+    },
+
+    fieldLayout: {
+      marginY: 'xs',
+      helperColor: 'primary',
+      helperMarginLeft: 'sm',
+      helperMarginRight: 'xs',
+      descriptionFontSize: 'sm',
+      descriptionColor: 'gray-600',
+    },
+
+    table: {
+      bgColor: 'white',
+      shadow: 'none',
+      thPaddingX: 'md',
+      thPaddingY: 'md',
+      thBorderBottomWidth: '1px',
+      thBorderBottomColor: 'lightest',
+      thBgColor: 'lightest',
+      thFontWeigth: 'semibold',
+      thFontColor: 'darker',
+      thFontCase: 'uppercase',
+      thFontSize: 'xs',
+      thLetterSpacing: 'xl',
+      thFilterInputBgColor: 'lighter',
+      thFilterInputFontSize: 'sm',
+      thFilterInputPaddingX: 'xs',
+      thFilterInputPaddingY: 'xs',
+      tdFontColor: 'darkest',
+      tdPaddingX: 'md',
+      tdPaddingY: 'sm',
+      tdBorderBottomColor: 'lighter',
+      tdBorderBottomStyle: 'solid',
+      tdBorderBottomWidth: '1px',
+      tdStripBgColor: 'lightest',
+      tdHoverBgColor: 'primary',
+      tdHoverFontColor: 'inherit',
+      tdExpandedBgColor: 'lightest',
+      loadingRowBgColor: 'lightest',
+      loadingRowMinHeight: '40px',
+    },
+
+    input: {
+      bgColor: 'white',
+      width: 'full',
+      borderWidth: 1,
+      borderColor: 'light',
+      borderRadius: 'sm',
+      borderStyle: 'solid',
+      borderFocusColor: 'primary',
+      borderFocusWidth: 2,
+      paddingX: 'sm',
+      paddingY: 'xs',
+      xsPaddingX: 'sm',
+      xsPaddingY: 0,
+      xsFontSize: 'sm',
+      smPaddingX: 'sm',
+      smPaddingY: 'xs',
+      smFontSize: 'sm',
+      mdPaddingX: 'sm',
+      mdPaddingY: 'sm',
+      mdFontSize: 'default',
+      lgPaddingX: 'sm',
+      lgPaddingY: 'md',
+      lgFontSize: 'default',
+      xlPaddingX: 'sm',
+      xlPaddingY: 'lg',
+      xlFontSize: 'lg',
+      appearance: 'none',
+      outline: 'none',
+      fontColor: 'darkest',
+      placeholderColor: 'light',
+    },
+
+    label: {
+      fontWeight: 'medium',
+      fontCase: 'none',
+      fontColor: 'darker',
+      fontSize: 'inherit',
+      letterSpacing: 'md',
+      requiredColor: 'danger',
+      requiredWeight: 'bold',
+      requiredMarginLeft: 'xs',
+      helperIconColor: 'primary',
+      helperMarginLeft: 'sm',
+    },
+
+    link: {
+      fontWeight: 'normal',
+      fontColor: 'primary',
+      textDecoration: 'none',
+      fontWeightHover: 'normal',
+      fontColorHover: 'primary',
+      textDecorationHover: 'underline',
+    },
+
+    checkbox: {
+      color: 'primary',
+      bgColor: 'white',
+    },
+
+    dashboard: {
+      left: {
+        bgColor: 'lighter',
+      },
+      header: {
+        bgColor: 'secondary',
+      },
+      body: {
+        bgColor: 'background',
+      },
+      right: {
+        bgColor: 'lighter',
+      },
+      footer: {
+        bgColor: 'lighter',
+      },
+    },
+    tab: {
+      activeBgColor: 'inherit',
+      activeBorderColor: 'primary',
+      activeBorderStyle: 'solid',
+      activeBorderWidth: '2px',
+      activeFontSize: 'inherit',
+      activeFontColor: 'primary',
+      activeFontWeight: 'semibold',
+      bgColor: 'inherit',
+      borderColor: 'lighter',
+      borderRadius: 'sm',
+      borderStyle: 'solid',
+      borderWidth: '1px',
+      cursor: 'pointer',
+      fontColor: 'inherit',
+      fontSize: 'inherit',
+      fontWeight: 'inherit',
+      hoverBgColor: 'lightest',
+      hoverBorderColor: 'dark',
+      hoverBorderStyle: 'solid',
+      hoverBorderWidth: '2px',
+      hoverFontColor: 'inherit',
+      marginBefore: 'xs',
+      marginAfter: 'xs',
+      paddingX: 'md',
+      paddingY: 'xs',
+    },
+
+    card: {
+      borderColor: 'gray-300',
+      borderRadius: 'sm',
+      borderStyle: 'solid',
+      borderWidth: '1px',
+      shadow: 'sm',
+      bgColor: 'white',
+      fontColor: 'primary',
+      fontCase: 'uppercase',
+      fontSize: 'inherit',
+      fontWeight: 'bold',
+      paddingX: 'lg',
+      paddingY: 'lg',
+      iconColor: 'primary',
+      iconWidth: '16px',
+      iconHeight: '16px',
+      marginTop: '2xl',
+      letterSpacing: '2xl',
+      titleBorderBottomWidth: '1px',
+    },
+
+    properties: {
+      fontWeight: 'bold',
+      paddingY: 'xs',
+    },
+
+    modal: {
+      bgColor: 'background',
+      maskColor: 'darkest',
+      maskOpacity: '0.85',
+      zIndex: 1050,
+      xsmallSize: '20%',
+      smallSize: '30%',
+      mediumSize: '50%',
+      largeSize: '75%',
+      xlargeSize: '90%',
+      boxShadow: 'none',
+      borderRadius: 'sm',
+    },
+
+    wizard: {
+      activeBgColor: 'blue-100',
+      activeBorderColor: 'primary',
+      activeFontSize: 'inherit',
+      activeFontColor: 'primary',
+      activeFontWeight: 'bold',
+      bgColor: 'lighter',
+      borderColor: 'light',
+      borderRadius: 0,
+      borderStyle: 'solid',
+      borderWidth: '3px',
+      cursor: 'pointer',
+      disabledBgColor: 'inherit',
+      disabledBorderColor: 'inherit',
+      disabledFontSize: 'inherit',
+      disabledFontColor: 'light',
+      disabledFontWeight: 'inherit',
+      errorBgColor: 'red-100',
+      errorBorderColor: 'danger',
+      errorFontColor: 'danger',
+      fontColor: 'inherit',
+      fontSize: 'inherit',
+      fontWeight: 'medium',
+      hoverBgColor: 'light',
+      hoverBorderColor: 'inherit',
+      hoverBorderStyle: 'inherit',
+      hoverBorderWidth: 'inherit',
+      hoverFontColor: 'inherit',
+      marginBefore: 0,
+      marginAfter: 0,
+      paddingRight: 'lg',
+      paddingLeft: 'lg',
+      paddingTop: 'sm',
+      paddingBottom: 'sm',
+      stepsBgColor: 'lighter',
+      stepsBorderColor: 'light',
+      stepsBorderStyle: 'solid',
+      stepsBorderWidth: '1px',
+      stepsPaddingTop: 'lg',
+      stepsPaddingBottom: 'lg',
+      stepsPaddingLeft: 'xl',
+      stepsPaddingRight: 0,
+      successBgColor: 'green-100',
+      successBorderColor: 'success',
+      successFontColor: 'success',
+      warningBgColor: 'yellow-100',
+      warningBorderColor: 'warning',
+      warningFontColor: 'warning',
+    },
+  };
+
+  theme.accordion = {
+    fontWeight: 'bold',
+    fontColor: 'inherit',
+    activeFontColor: 'lightest',
+    hoverFontColor: 'inherit',
+    fontSize: 'inherit',
+    togglerIconWidth: 'md',
+    togglerIconHeight: 'md',
+    bgColor: 'inherit',
+    activeBgColor: 'primary',
+    hoverBgColor: lighten(get(theme.colors, 'primary', ''), 400),
+    borderColor: 'light',
+    borderRadius: 'xl',
+    borderStyle: 'solid',
+    borderWidth: '1px',
+    paddingX: 'sm',
+    paddingY: 'sm',
+  };
+
+  set(theme.table, 'thFilterInputBgColor', lighten(get(theme.colors, 'primary', ''), 400));
+  set(theme.table, 'tdHoverBgColor', lighten(get(theme.colors, 'primary', ''), 400));
+
+  Object.keys(ColorKeys).forEach((kind) => {
+    set(theme, `buttons.${kind}`, {
+      bgColor: kind,
+      bgColorFlat: 'transparent',
+      bgColorOutline: 'transparent',
+      borderColor: kind,
+      borderColorFlat: 'transparent',
+      borderColorOutline: kind,
+      borderRadius: 'sm',
+      borderStyle: 'solid',
+      borderWidth: 1,
+      color: ['light', 'lightest', 'lighter', 'white'].includes(kind) ? 'darker' : 'white',
+      colorFlat: kind,
+      colorOutline: ['light', 'lightest', 'lighter', 'white'].includes(kind) ? 'darkest' : kind,
+      cursor: 'pointer',
+      cursorDisabled: 'not-allowed',
+      fontSize: 'md',
+      fontWeight: 'bold',
+      hoverColor: ['light', 'lightest', 'lighter', 'white'].includes(kind) ? 'black' : 'white',
+      hoverColorFlat: lighten(get(theme.colors, kind, ''), 100),
+      hoverColorOutline: kind,
+      hoverBgColor: darken(get(theme.colors, kind, ''), 100),
+      hoverBgColorFlat: 'transparent',
+      hoverBgColorOutline: lighten(get(theme.colors, kind, ''), 400),
+      hoverBorderColor: darken(get(theme.colors, kind, ''), 100),
+      hoverBorderColorFlat: 'transparent',
+      hoverBorderColorOutline: kind,
+      letterSpacing: 'normal',
+      lineHeight: '3xl',
+      opacity: 1,
+      opacityDisabled: 0.6,
+      paddingY: 'none',
+      paddingX: 'lg',
+      textOverflow: 'ellipsis',
+      textTransform: 'none',
+      whiteSpace: 'nowrap',
+    });
+
+    set(theme, `tooltip.${kind}`, {
+      bgColor: kind,
+      color: ['light', 'lightest', 'white'].includes(kind) ? 'darkest' : 'white',
+      linkColor: ['light', 'lightest', 'white'].includes(kind)
+        ? 'primary'
+        : lighten(get(theme.colors, 'primary', ''), 200),
+      borderColor: kind,
+      borderRadius: 'sm',
+      borderStyle: 'solid',
+      borderWidth: '1px',
+      boxShadow: 'lg',
+      padding: 'md',
+      fontSize: 'sm',
+    });
+  });
+
+  return simpleMergeDeep(customTheme, theme);
+};
+
+export const BaseTheme: FCC<ThemeProps> = ({ theme = baseTheme(), children }) => {
+  const GlobalStyles = theme.GlobalStyles;
+  return (
+    <>
+      {GlobalStyles && <GlobalStyles theme={theme} />}
+      <ThemeProvider theme={theme}>{children}</ThemeProvider>
+    </>
+  );
+};

package/src/theme/tailwind.tsx

@@ -0,0 +1,112 @@
+import { FCC, simpleMergeDeep } from 'onekijs-framework';
+import React from 'react';
+import { Palette, Theme, ThemeProps } from '../styles/typings';
+import { BaseTheme, baseTheme } from './base';
+
+export const tailwindPalette: Palette = {
+  colors: {
+    transparent: 'transparent',
+    current: 'currentColor',
+    black: '#000',
+    white: '#fff',
+    'gray-100': '#f7fafc',
+    'gray-200': '#edf2f7',
+    'gray-300': '#e2e8f0',
+    'gray-400': '#cbd5e0',
+    'gray-500': '#a0aec0',
+    'gray-600': '#718096',
+    'gray-700': '#4a5568',
+    'gray-800': '#2d3748',
+    'gray-900': '#1a202c',
+    'red-100': '#fff5f5',
+    'red-200': '#fed7d7',
+    'red-300': '#feb2b2',
+    'red-400': '#fc8181',
+    'red-500': '#f56565',
+    'red-600': '#e53e3e',
+    'red-700': '#c53030',
+    'red-800': '#9b2c2c',
+    'red-900': '#742a2a',
+    'orange-100': '#fffaf0',
+    'orange-200': '#feebc8',
+    'orange-300': '#fbd38d',
+    'orange-400': '#f6ad55',
+    'orange-500': '#ed8936',
+    'orange-600': '#dd6b20',
+    'orange-700': '#c05621',
+    'orange-800': '#9c4221',
+    'orange-900': '#7b341e',
+    'yellow-100': '#fffff0',
+    'yellow-200': '#fefcbf',
+    'yellow-300': '#faf089',
+    'yellow-400': '#f6e05e',
+    'yellow-500': '#ecc94b',
+    'yellow-600': '#d69e2e',
+    'yellow-700': '#b7791f',
+    'yellow-800': '#975a16',
+    'yellow-900': '#744210',
+    'green-100': '#f0fff4',
+    'green-200': '#c6f6d5',
+    'green-300': '#9ae6b4',
+    'green-400': '#68d391',
+    'green-500': '#48bb78',
+    'green-600': '#38a169',
+    'green-700': '#2f855a',
+    'green-800': '#276749',
+    'green-900': '#22543d',
+    'teal-100': '#e6fffa',
+    'teal-200': '#b2f5ea',
+    'teal-300': '#81e6d9',
+    'teal-400': '#4fd1c5',
+    'teal-500': '#38b2ac',
+    'teal-600': '#319795',
+    'teal-700': '#2c7a7b',
+    'teal-800': '#285e61',
+    'teal-900': '#234e52',
+    'blue-100': '#ebf8ff',
+    'blue-200': '#bee3f8',
+    'blue-300': '#90cdf4',
+    'blue-400': '#63b3ed',
+    'blue-500': '#4299e1',
+    'blue-600': '#3182ce',
+    'blue-700': '#2b6cb0',
+    'blue-800': '#2c5282',
+    'blue-900': '#2a3042',
+    'indigo-100': '#ebf4ff',
+    'indigo-200': '#c3dafe',
+    'indigo-300': '#a3bffa',
+    'indigo-400': '#7f9cf5',
+    'indigo-500': '#667eea',
+    'indigo-600': '#5a67d8',
+    'indigo-700': '#4c51bf',
+    'indigo-800': '#434190',
+    'indigo-900': '#3c366b',
+    'purple-100': '#faf5ff',
+    'purple-200': '#e9d8fd',
+    'purple-300': '#d6bcfa',
+    'purple-400': '#b794f4',
+    'purple-500': '#9f7aea',
+    'purple-600': '#805ad5',
+    'purple-700': '#6b46c1',
+    'purple-800': '#553c9a',
+    'purple-900': '#44337a',
+    'pink-100': '#fff5f7',
+    'pink-200': '#fed7e2',
+    'pink-300': '#fbb6ce',
+    'pink-400': '#f687b3',
+    'pink-500': '#ed64a6',
+    'pink-600': '#d53f8c',
+    'pink-700': '#b83280',
+    'pink-800': '#97266d',
+    'pink-900': '#702459',
+  },
+};
+
+export const tailwindTheme = (customTheme: Partial<Theme> = {}): Theme => {
+  const theme = simpleMergeDeep(customTheme, { palette: tailwindPalette });
+  return baseTheme(theme) as Theme;
+};
+
+export const TailwindTheme: FCC<ThemeProps> = (props) => {
+  return <BaseTheme theme={tailwindTheme()} {...props} />;
+};

package/src/utils/color.ts

@@ -1,4 +1,13 @@
-export const deriveColor = (color: string, gap: number, dark: boolean, newColorValue?: string): string => {
+export const darken = (color: string, gap = 100, newColorValue?: string): string => {
+  const [colorValue, weight] = color.split('-');
+  newColorValue = newColorValue || colorValue;
+  if (weight === undefined) {
+    return newColorValue;
+  }
+  return `${newColorValue}-${Math.min(parseInt(weight) + gap, 900)}`;
+};
+
+export const deriveColor = (color: string, gap = 100, dark: boolean, newColorValue?: string): string => {
   const [colorValue, weight] = color.split('-');
   newColorValue = newColorValue || colorValue;
   if (weight === undefined) {
@@ -7,6 +16,15 @@ export const deriveColor = (color: string, gap: number, dark: boolean, newColorV
   return `${newColorValue}-${parseInt(weight) + (dark ? -gap : gap)}`;
 };
 
+export const lighten = (color: string, gap: number, newColorValue?: string): string => {
+  const [colorValue, weight] = color.split('-');
+  newColorValue = newColorValue || colorValue;
+  if (weight === undefined) {
+    return newColorValue;
+  }
+  return `${newColorValue}-${Math.max(parseInt(weight) - gap, 0)}`;
+};
+
 // https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
 export const hexToRgb = (hex: string): { r: number; g: number; b: number } | null => {
   const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
@@ -28,3 +46,19 @@ export const hexToRgb = (hex: string): { r: number; g: number; b: number } | nul
 export const rgbToHex = (r: number, g: number, b: number): string => {
   return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
 };
+
+export const applyOpacity = (color: string, opacity: number | string): string => {
+  if (color.startsWith('#')) {
+    const rgb = hexToRgb(color);
+    if (rgb !== null) {
+      return `rgba(${rgb['r']},${rgb['g']},${rgb['b']},${opacity})`;
+    } else {
+      return color;
+    }
+  } else if (color.startsWith('rgb(')) {
+    return color.replace('rgb(', 'rgba(').replace(/.$/, `,${opacity})`);
+  } else if (color.startsWith('hsl(')) {
+    return color.replace('hsl(', 'hsla(').replace(/.$/, `,${opacity})`);
+  }
+  return color;
+};

package/src/utils/dom.ts

@@ -0,0 +1,32 @@
+import { CursorProperty } from 'csstype';
+
+export const clearSelection = (): void => {
+  const getSelection = window.getSelection;
+  if (getSelection !== null) {
+    const selection = getSelection();
+    if (selection !== null) selection.removeAllRanges();
+  }
+};
+
+export const forceCursor = (cursor?: CursorProperty): void => {
+  document.body.style.cursor = cursor ? `${cursor}` : '';
+};
+
+//cursor: ${props.area === 'header' ? 's' : 'n'}-resize;
+
+export const getTranslateXY = (element: Element): { x: number; y: number } => {
+  const style = window.getComputedStyle(element);
+  const matrix = new DOMMatrixReadOnly(style.transform);
+  return {
+    x: matrix.m41,
+    y: matrix.m42,
+  };
+};
+
+export const markBodyAsUnselectable = (): void => {
+  document.body.style.userSelect = 'none';
+};
+
+export const markBodyAsSelectable = (): void => {
+  document.body.style.userSelect = '';
+};