@fibery/ui-kit 1.35.0 → 1.36.0

package/src/html-styles.ts

@@ -0,0 +1,720 @@
+/* eslint-disable max-lines */
+import {css} from "@linaria/core";
+import {
+  border,
+  fontFamily,
+  fontWeight,
+  lineHeight,
+  space,
+  textStyles,
+  themeVars,
+  transition,
+  typeSizes,
+} from "./design-system";
+
+export const linkStyles = {
+  color: themeVars.linkColor,
+  borderBottom: themeVars.linkBorder,
+  textDecoration: "none",
+  cursor: "pointer",
+  transition: `border ${transition}`,
+  "&:hover": {
+    color: themeVars.linkHoverColor,
+    borderBottom: themeVars.linkBorderHover,
+    textDecoration: "none",
+    cursor: "pointer",
+    transition: `border ${transition}`,
+  },
+};
+
+export const emptyNodeStyle = {
+  float: "left",
+  pointerEvents: "none",
+  height: 0,
+  color: themeVars.disabledTextColor,
+  content: "attr(placeholder)",
+};
+
+/*
+ Used in regular text editor
+ */
+const htmlStyles = {
+  fontSize: 16,
+  "& h1": {
+    fontFamily,
+    fontSize: 28,
+    letterSpacing: "-0.003em",
+    lineHeight: lineHeight.heading,
+    fontWeight: fontWeight.semibold,
+    color: themeVars.textColor,
+    paddingBottom: space.s3,
+    paddingTop: space.s3,
+    marginBottom: space.s8,
+    marginTop: space.s24,
+  },
+  "& h2": {
+    fontFamily,
+    fontSize: 24,
+    letterSpacing: "-0.002em",
+    lineHeight: lineHeight.heading,
+    fontWeight: fontWeight.semibold,
+    color: themeVars.textColor,
+    paddingBottom: space.s3,
+    paddingTop: space.s3,
+    marginBottom: space.s4,
+    marginTop: space.s24,
+  },
+  "& h3": {
+    fontFamily,
+    fontSize: 20,
+    letterSpacing: "-0.002em",
+    lineHeight: lineHeight.heading,
+    fontWeight: fontWeight.semibold,
+    color: themeVars.textColor,
+    paddingBottom: space.s3,
+    paddingTop: space.s3,
+    marginBottom: space.s4,
+    marginTop: space.s20,
+  },
+  "& h4": {
+    fontFamily,
+    fontSize: 18,
+    lineHeight: lineHeight.heading,
+    fontWeight: fontWeight.semibold,
+    color: themeVars.textColor,
+    paddingBottom: space.s3,
+    paddingTop: space.s3,
+    marginBottom: space.s4,
+    marginTop: space.s16,
+  },
+  "& ul": {
+    margin: space.s2,
+    marginLeft: space.s12,
+    listStyleType: "disc",
+    padding: 0,
+    ...textStyles.regular,
+  },
+  "& ol": {
+    margin: space.s2,
+    marginLeft: space.s12,
+    listStyleType: "decimal",
+    padding: 0,
+    ...textStyles.regular,
+  },
+  "& ol li::marker": {
+    ...textStyles.numeric.tabularOn,
+  },
+  "& li": {
+    marginLeft: space.s12,
+    padding: 0,
+    ...textStyles.regular,
+  },
+  "& li p": {
+    marginTop: space.s2,
+    marginBottom: space.s2,
+    marginLeft: space.s4,
+    paddingTop: space.s3,
+    paddingBottom: space.s3,
+  },
+  "& blockquote": {
+    marginTop: space.s6,
+    marginBottom: space.s6,
+    paddingTop: 0,
+    marginLeft: space.s2,
+    marginRight: 0,
+    paddingBottom: 0,
+    paddingLeft: space.s12,
+    paddingRight: space.s12,
+    borderLeft: `${space.s3}px solid ${themeVars.colorBorderBlockQuote}`,
+    "& p": {
+      fontSize: typeSizes[3],
+    },
+    "& *:last-child": {
+      marginBottom: 0,
+      marginTop: 0,
+    },
+  },
+  "& p": {
+    marginTop: space.s2,
+    marginBottom: space.s2,
+    paddingTop: space.s3,
+    paddingBottom: space.s3,
+    ...textStyles.big,
+    lineHeight: lineHeight.text,
+  },
+  "& .fibery-rich-text-check-item": {
+    marginTop: space.s2,
+    marginBottom: space.s2,
+    paddingTop: space.s3,
+    paddingBottom: space.s3,
+    ...textStyles.big,
+    lineHeight: lineHeight.text,
+  },
+  "& table": {
+    marginTop: space.s8,
+    marginBottom: space.s4,
+  },
+  "& td": {
+    paddingTop: space.s3,
+    paddingLeft: space.s12,
+    paddingRight: space.s12,
+    paddingBottom: space.s3,
+    "& p": {
+      marginTop: space.s2,
+      marginBottom: space.s2,
+      paddingTop: space.s3,
+      paddingBottom: space.s3,
+      ...textStyles.big,
+      lineHeight: lineHeight.text,
+    },
+  },
+  "& .code-block": {
+    marginTop: space.s8,
+    marginBottom: space.s8,
+  },
+  "& pre": {
+    whiteSpace: "pre-wrap",
+    overflow: "visible",
+    paddingTop: space.s24 + space.s6,
+    paddingBottom: space.s24 + space.s4,
+    paddingLeft: space.s12 + space.s4,
+    paddingRight: space.s12 + space.s4,
+    backgroundColor: themeVars.codeBlockBgColor,
+    borderRadius: 6,
+    ...textStyles.code,
+    "& *:last-child": {
+      marginBottom: 0,
+    },
+  },
+  "& code": {
+    ...textStyles.code,
+    fontSize: "85%",
+    lineHeight: "inherit",
+    fontWeight: "inherit",
+    padding: `${space.s3}px ${space.s4}px`,
+    color: themeVars.codeColor,
+    backgroundColor: themeVars.codeBgColor,
+    borderRadius: border.radius4,
+  },
+  "& pre code": {
+    ...textStyles.code,
+    backgroundColor: themeVars.transparent,
+    color: themeVars.textColor,
+    padding: 0,
+    boxShadow: "none",
+    borderRadius: 0,
+    margin: 0,
+    tabSize: 4,
+  },
+  "& b, & strong": {
+    fontWeight: fontWeight.bold,
+  },
+  "& a.prosemirror-link": linkStyles,
+  "& div.fibery-note": {
+    ...textStyles.note,
+    marginBottom: space.s12,
+    "& p": {
+      margin: space.s12,
+    },
+  },
+  "& div.fibery-important": {
+    ...textStyles.important,
+    marginBottom: space.s12,
+    "& p": {
+      margin: space.s12,
+    },
+  },
+  "& > *:first-child": {
+    marginTop: 0,
+  },
+  "& > *:last-child": {
+    marginBottom: 0,
+  },
+  "& > .fibery-rich-text-image-block:last-child": {
+    marginBottom: space.s4,
+  },
+  "& .fibery-rich-text-heading:has(.highlighted-node), & pre:has(.highlighted-node), & p:has(.highlighted-node), & .fibery-rich-text-check-item:has(.highlighted-node)":
+    {
+      backgroundColor: `${themeVars.warningBgColor} !important`,
+      scrollMarginTop: "33vh",
+      transition: "background-color 1s",
+    },
+  "& .code-block:has(.highlighted-node)": {
+    scrollMarginTop: "33vh",
+  },
+};
+
+/*
+ Used in comments and view descriptions
+ */
+const smallHtmlStyles = {
+  fontSize: typeSizes[4],
+  "& h1": {
+    fontFamily,
+    fontSize: 24,
+    letterSpacing: "-0.003em",
+    lineHeight: lineHeight.heading,
+    fontWeight: fontWeight.semibold,
+    color: themeVars.textColor,
+    paddingBottom: space.s2,
+    paddingTop: space.s2,
+    marginBottom: space.s6,
+    marginTop: space.s24,
+  },
+  "& h2": {
+    fontFamily,
+    fontSize: 21,
+    letterSpacing: "-0.002em",
+    lineHeight: lineHeight.heading,
+    fontWeight: fontWeight.semibold,
+    color: themeVars.textColor,
+    paddingBottom: space.s2,
+    paddingTop: space.s2,
+    marginBottom: space.s4,
+    marginTop: space.s20,
+  },
+  "& h3": {
+    fontFamily,
+    fontSize: 18,
+    letterSpacing: "-0.002em",
+    lineHeight: lineHeight.heading,
+    fontWeight: fontWeight.semibold,
+    color: themeVars.textColor,
+    paddingBottom: space.s2,
+    paddingTop: space.s2,
+    marginBottom: space.s4,
+    marginTop: space.s16,
+  },
+  "& h4": {
+    fontFamily,
+    fontSize: 16,
+    lineHeight: lineHeight.heading,
+    fontWeight: fontWeight.semibold,
+    color: themeVars.textColor,
+    paddingBottom: space.s2,
+    paddingTop: space.s2,
+    marginBottom: space.s4,
+    marginTop: space.s14,
+  },
+  "& ul": {
+    margin: space.s2,
+    marginLeft: space.s12,
+    listStyleType: "disc",
+    padding: 0,
+    ...textStyles.regular,
+  },
+  "& ol": {
+    margin: space.s2,
+    marginLeft: space.s12,
+    listStyleType: "decimal",
+    padding: 0,
+    ...textStyles.regular,
+  },
+  "& ol li::marker": {
+    ...textStyles.numeric.tabularOn,
+  },
+  "& li": {
+    marginLeft: space.s12,
+    padding: 0,
+    ...textStyles.regular,
+  },
+  "& li p": {
+    marginTop: space.s2,
+    marginBottom: space.s2,
+    paddingTop: space.s2,
+    paddingBottom: space.s2,
+  },
+  "& blockquote": {
+    marginTop: space.s4,
+    marginBottom: space.s4,
+    paddingTop: 0,
+    marginLeft: 0,
+    marginRight: 0,
+    paddingBottom: 0,
+    paddingLeft: space.s10,
+    paddingRight: space.s10,
+    borderLeft: `3px solid ${themeVars.colorBorderBlockQuote}`,
+    "& p": {
+      fontSize: typeSizes[4],
+    },
+    "& *:last-child": {
+      marginBottom: 0,
+    },
+  },
+  "& p": {
+    marginTop: space.s2,
+    marginBottom: space.s2,
+    paddingTop: space.s2,
+    paddingBottom: space.s2,
+    ...textStyles.regular,
+    lineHeight: lineHeight.text,
+  },
+  "& .fibery-rich-text-check-item": {
+    marginTop: space.s2,
+    marginBottom: space.s2,
+    paddingTop: space.s2,
+    paddingBottom: space.s2,
+    ...textStyles.regular,
+    lineHeight: lineHeight.text,
+  },
+  "& table": {
+    marginTop: space.s6,
+    marginBottom: space.s4,
+  },
+  "& td": {
+    paddingTop: space.s2,
+    paddingLeft: space.s10,
+    paddingRight: space.s10,
+    paddingBottom: space.s2,
+    "& p": {
+      marginTop: space.s2,
+      marginBottom: space.s2,
+      paddingTop: space.s2,
+      paddingBottom: space.s2,
+      ...textStyles.regular,
+      lineHeight: lineHeight.text,
+    },
+  },
+  "& .code-block": {
+    marginTop: space.s6,
+    marginBottom: space.s6,
+  },
+  "& pre": {
+    whiteSpace: "pre-wrap",
+    overflow: "visible",
+    paddingTop: space.s20 + space.s6,
+    paddingBottom: space.s20 + space.s4,
+    paddingLeft: space.s10 + space.s4,
+    paddingRight: space.s10 + space.s4,
+    backgroundColor: themeVars.codeBlockBgColor,
+    borderRadius: 6,
+    ...textStyles.code,
+    "& *:last-child": {
+      marginBottom: 0,
+    },
+  },
+  "& code": {
+    ...textStyles.code,
+    fontSize: "85%",
+    lineHeight: "inherit",
+    fontWeight: "inherit",
+    padding: `${space.s2}px ${space.s3}px`,
+    color: themeVars.codeColor,
+    backgroundColor: themeVars.codeBgColor,
+    borderRadius: space.s3,
+  },
+  "& pre code": {
+    ...textStyles.code,
+    backgroundColor: themeVars.transparent,
+    color: themeVars.textColor,
+    padding: 0,
+    boxShadow: "none",
+    borderRadius: 0,
+    margin: 0,
+    tabSize: 4,
+  },
+  "& b, & strong": {
+    fontWeight: fontWeight.bold,
+  },
+  "& a.prosemirror-link": linkStyles,
+  "& div.fibery-note": {
+    ...textStyles.note,
+    marginBottom: space.s12,
+    "& p": {
+      margin: space.s12,
+    },
+  },
+  "& div.fibery-important": {
+    ...textStyles.important,
+    marginBottom: space.s12,
+    "& p": {
+      margin: space.s12,
+    },
+  },
+  "& > *:first-child": {
+    marginTop: 0,
+  },
+  "& > *:last-child": {
+    marginBottom: 0,
+  },
+  "& > .fibery-rich-text-image-block:last-child": {
+    marginBottom: space.s2,
+  },
+};
+
+/*
+ Used in chat
+ */
+/*
+ Used in chat
+ */
+const chatHtmlStyles = {
+  fontSize: typeSizes[4],
+  "& h1": {
+    fontFamily,
+    fontSize: 20,
+    letterSpacing: "-0.003em",
+    lineHeight: lineHeight.heading,
+    fontWeight: fontWeight.semibold,
+    color: themeVars.textColor,
+    marginBottom: space.s8,
+    marginTop: space.s20,
+  },
+  "& h2": {
+    fontFamily,
+    fontSize: 18,
+    letterSpacing: "-0.002em",
+    lineHeight: lineHeight.heading,
+    fontWeight: fontWeight.semibold,
+    color: themeVars.textColor,
+    marginBottom: space.s4,
+    marginTop: space.s18,
+  },
+  "& h3": {
+    fontFamily,
+    fontSize: 16,
+    letterSpacing: "-0.002em",
+    lineHeight: lineHeight.heading,
+    fontWeight: fontWeight.semibold,
+    color: themeVars.textColor,
+    marginBottom: space.s4,
+    marginTop: space.s16,
+  },
+  "& h4": {
+    fontFamily,
+    fontSize: 14,
+    lineHeight: lineHeight.heading,
+    fontWeight: fontWeight.semibold,
+    color: themeVars.textColor,
+    marginBottom: space.s4,
+    marginTop: space.s14,
+  },
+  "& ul": {
+    margin: space.s2,
+    marginLeft: space.s6,
+    listStyleType: "disc",
+    padding: 0,
+    ...textStyles.regular,
+  },
+  "& ol": {
+    margin: space.s2,
+    marginLeft: space.s6,
+    listStyleType: "decimal",
+    padding: 0,
+    ...textStyles.regular,
+  },
+  "& ol li::marker": {
+    ...textStyles.numeric.tabularOn,
+  },
+  "& li": {
+    marginLeft: space.s10,
+    padding: 0,
+    ...textStyles.regular,
+  },
+  "& li p": {
+    marginTop: space.s2,
+    marginBottom: space.s2,
+    paddingTop: space.s2,
+    paddingBottom: space.s2,
+  },
+  "& blockquote": {
+    marginTop: space.s4,
+    marginBottom: space.s4,
+    paddingTop: 0,
+    marginLeft: 0,
+    marginRight: 0,
+    paddingBottom: 0,
+    paddingLeft: space.s10,
+    paddingRight: space.s10,
+    borderLeft: `3px solid ${themeVars.colorBorderBlockQuote}`,
+    "& p": {
+      fontSize: typeSizes[4],
+    },
+    "& *:last-child": {
+      marginBottom: 0,
+    },
+  },
+  "& p": {
+    marginTop: space.s2,
+    marginBottom: space.s2,
+    paddingTop: space.s2,
+    paddingBottom: space.s2,
+    ...textStyles.regular,
+    lineHeight: lineHeight.text,
+  },
+  "& .fibery-rich-text-check-item": {
+    marginTop: space.s2,
+    marginBottom: space.s2,
+    paddingTop: space.s2,
+    paddingBottom: space.s2,
+    ...textStyles.regular,
+    lineHeight: lineHeight.text,
+  },
+  "& table": {
+    marginTop: space.s4,
+    marginBottom: space.s4,
+  },
+  "& td": {
+    paddingTop: space.s2,
+    paddingLeft: space.s10,
+    paddingRight: space.s10,
+    paddingBottom: space.s2,
+    "& p": {
+      marginTop: space.s2,
+      marginBottom: space.s2,
+      paddingTop: space.s2,
+      paddingBottom: space.s2,
+      ...textStyles.regular,
+      lineHeight: lineHeight.text,
+    },
+  },
+  "& .code-block": {
+    marginTop: space.s6,
+    marginBottom: space.s6,
+  },
+  "& pre": {
+    whiteSpace: "pre-wrap",
+    overflow: "visible",
+    paddingTop: space.s20 + space.s6,
+    paddingBottom: space.s20 + space.s4,
+    paddingLeft: space.s10 + space.s4,
+    paddingRight: space.s10 + space.s4,
+    backgroundColor: themeVars.codeBlockBgColor,
+    borderRadius: 6,
+    ...textStyles.code,
+    "& *:last-child": {
+      marginBottom: 0,
+    },
+  },
+  "& code": {
+    ...textStyles.code,
+    fontSize: "85%",
+    lineHeight: "inherit",
+    fontWeight: "inherit",
+    padding: `${space.s2}px ${space.s3}px`,
+    color: themeVars.codeColor,
+    backgroundColor: themeVars.codeBgColor,
+    borderRadius: space.s3,
+  },
+  "& pre code": {
+    ...textStyles.code,
+    backgroundColor: themeVars.transparent,
+    color: themeVars.textColor,
+    padding: 0,
+    boxShadow: "none",
+    borderRadius: 0,
+    margin: 0,
+    tabSize: 4,
+  },
+  "& b, & strong": {
+    fontWeight: fontWeight.bold,
+  },
+  "& a.prosemirror-link": linkStyles,
+  "& div.fibery-note": {
+    ...textStyles.note,
+    marginBottom: space.s12,
+    "& p": {
+      margin: space.s12,
+    },
+  },
+  "& div.fibery-important": {
+    ...textStyles.important,
+    marginBottom: space.s12,
+    "& p": {
+      margin: space.s12,
+    },
+  },
+  "& > *:first-child": {
+    marginTop: 0,
+  },
+  "& > *:last-child": {
+    marginBottom: 0,
+  },
+  "& > .fibery-rich-text-image-block:last-child": {
+    marginBottom: space.s2,
+  },
+};
+
+/*
+ Used in Whiteboard editor
+ */
+const whiteboardHtmlStyles = {
+  "& p": {
+    marginBottom: "1em",
+    paddingTop: 0,
+    paddingBottom: 0,
+    lineHeight: "1.2em",
+    minWidth: space.s1,
+    fontFamily: "inherit",
+    fontSize: "inherit",
+  },
+  "& a.prosemirror-link": {
+    color: "currentColor",
+    borderBottom: "1.5px solid currentColor",
+    textDecoration: "none",
+    cursor: "pointer",
+    transition: "none",
+    "&:hover": {
+      color: "currentColor",
+      borderBottom: "1.5px solid currentColor",
+      textDecoration: "none",
+      cursor: "pointer",
+      transition: "none",
+    },
+  },
+  "& b, & strong": {
+    fontWeight: fontWeight.bold,
+  },
+  "& > *:first-child": {
+    marginTop: 0,
+  },
+  "& > *:last-child": {
+    marginBottom: 0,
+  },
+};
+
+export const htmlStylesClass = css`
+  ${{...htmlStyles}}
+`;
+
+export const smallHtmlStylesClass = css`
+  ${{
+    ...smallHtmlStyles,
+    "& > *:last-child": {
+      marginBottom: 0,
+    },
+    "& .empty-node::before": {
+      ...textStyles.regular,
+      ...emptyNodeStyle,
+    },
+  }}
+`;
+
+export const chatHtmlStylesClass = css`
+  ${{
+    ...chatHtmlStyles,
+    "& > *:last-child": {
+      marginBottom: 0,
+    },
+    "& .empty-node::before": {
+      ...textStyles.regular,
+      ...emptyNodeStyle,
+    },
+  }}
+`;
+
+export const regularRichEditorHTMLStyles = css`
+  ${{
+    ...htmlStyles,
+    "& .empty-node::before": {
+      ...textStyles.big,
+      ...emptyNodeStyle,
+    },
+  }}
+`;
+
+export const whiteboardRichEditorHTMLStyles = css`
+  ${{
+    ...whiteboardHtmlStyles,
+  }}
+`;

package/src/icons/ast/AccessTemplate.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const AccessTemplate: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M13.187 2.24a8.334 8.334 0 0 1 2.705 1.868A8.334 8.334 0 1 1 4.108 15.892 8.333 8.333 0 0 1 13.187 2.24Zm-2.53 14.4a6.667 6.667 0 0 0 4.06-1.923A6.625 6.625 0 0 0 16.667 10a6.667 6.667 0 1 0-6.01 6.64ZM7.5 8.916a2.417 2.417 0 1 1 3.167 2.298v1.535a.75.75 0 0 1-1.5 0v-1.535A2.418 2.418 0 0 1 7.5 8.917ZM9.917 8a.917.917 0 1 0 0 1.833.917.917 0 0 0 0-1.833Z"},"children":[]}],"metadata":""}]},"name":"access-template"};
+
+export default AccessTemplate;