@cgboiler/biz-basic 1.0.53 → 1.0.55

package/es/rich-text-editor/menu-system/primitives/toolbar.js

@@ -0,0 +1,149 @@
+import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
+import "./_atomic.css";
+import { defineComponent, ref, onMounted, onBeforeUnmount } from "vue";
+import { Separator } from "./separator";
+import "../styles/toolbar.css";
+import { cn } from "../utils/tiptap-utils";
+import { useMenuNavigation } from "../hooks/use-menu-navigation";
+const useToolbarNavigation = (toolbarRef) => {
+  const items = ref([]);
+  const collectItems = () => {
+    if (!toolbarRef.value)
+      return [];
+    return Array.from(toolbarRef.value.querySelectorAll('button:not([disabled]), [role="button"]:not([disabled]), [tabindex="0"]:not([disabled])'));
+  };
+  const updateItems = () => {
+    items.value = collectItems();
+  };
+  let observer = null;
+  onMounted(() => {
+    const toolbar = toolbarRef.value;
+    if (!toolbar)
+      return;
+    updateItems();
+    observer = new MutationObserver(updateItems);
+    observer.observe(toolbar, {
+      childList: true,
+      subtree: true
+    });
+    const handleFocus = (e) => {
+      const target = e.target;
+      if (toolbar.contains(target)) {
+        target.setAttribute("data-focus-visible", "true");
+      }
+    };
+    const handleBlur = (e) => {
+      const target = e.target;
+      if (toolbar.contains(target)) {
+        target.removeAttribute("data-focus-visible");
+      }
+    };
+    toolbar.addEventListener("focus", handleFocus, true);
+    toolbar.addEventListener("blur", handleBlur, true);
+  });
+  onBeforeUnmount(() => {
+    const toolbar = toolbarRef.value;
+    if (observer)
+      observer.disconnect();
+    if (toolbar) {
+    }
+  });
+  const {
+    selectedIndex
+  } = useMenuNavigation({
+    containerRef: toolbarRef,
+    items: items.value,
+    // Pass initial value, but useMenuNavigation should handle reactivity if passed as ref? 
+    // In our ported useMenuNavigation, items is T[]. 
+    // We should modify useMenuNavigation to accept Ref<T[]> or just pass reactive items.
+    // However, our ported useMenuNavigation takes items as T[]. 
+    // This looks like a reactivity issue in my ported hook. 
+    // Re-checking hook: It takes "items: T[]". It uses "items" in handleKeyboardNavigation (closure).
+    // The items inside closure will be stale if items changes!
+    // I need to fix useMenuNavigation to accept Ref<T[]> or watch items.
+    // For now, let's assume I will fix useMenuNavigation or it works because it's re-evaluating?
+    // No, existing hook in React re-runs useEffect on [items].
+    // My Vue port has `handleKeyboardNavigation` which closes over `items`.
+    // I should make `items` a prop or getter in the hook.
+    // I will fix local closure logic here by passing a getter if possible, or just updating the hook in next step.
+    orientation: "horizontal",
+    onSelect: (el) => el.click(),
+    autoSelectFirstItem: false
+  });
+};
+const Toolbar = defineComponent({
+  name: "Toolbar",
+  props: {
+    variant: {
+      type: String,
+      default: "fixed"
+    },
+    className: {
+      type: String,
+      default: ""
+    }
+  },
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    const toolbarRef = ref(null);
+    useToolbarNavigation(toolbarRef);
+    return () => {
+      var _a;
+      return _createVNode("div", _mergeProps({
+        "ref": toolbarRef,
+        "role": "toolbar",
+        "aria-label": "toolbar",
+        "data-variant": props.variant,
+        "class": cn("tiptap-toolbar", props.className)
+      }, attrs), [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
+    };
+  }
+});
+const ToolbarGroup = defineComponent({
+  name: "ToolbarGroup",
+  props: {
+    className: {
+      type: String,
+      default: ""
+    }
+  },
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    return () => {
+      var _a;
+      return _createVNode("div", _mergeProps({
+        "role": "group",
+        "class": cn("tiptap-toolbar-group", props.className)
+      }, attrs), [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
+    };
+  }
+});
+const ToolbarSeparator = defineComponent({
+  name: "ToolbarSeparator",
+  setup(props, {
+    attrs
+  }) {
+    return () => _createVNode(Separator, _mergeProps({
+      "orientation": "vertical",
+      "decorative": true
+    }, attrs), null);
+  }
+});
+const Spacer = defineComponent({
+  name: "Spacer",
+  setup() {
+    return () => _createVNode("div", {
+      "style": "flex: 1 1 auto;"
+    }, null);
+  }
+});
+export {
+  Spacer,
+  Toolbar,
+  ToolbarGroup,
+  ToolbarSeparator
+};

package/es/rich-text-editor/menu-system/styles/animations.css

@@ -0,0 +1 @@
+@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes zoomIn{0%{transform:scale(.95)}to{transform:scale(1)}}@keyframes zoomOut{0%{transform:scale(1)}to{transform:scale(.95)}}@keyframes zoom{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes slideFromTop{0%{transform:translateY(-.5rem)}to{transform:translateY(0)}}@keyframes slideFromRight{0%{transform:translate(.5rem)}to{transform:translate(0)}}@keyframes slideFromLeft{0%{transform:translate(-.5rem)}to{transform:translate(0)}}@keyframes slideFromBottom{0%{transform:translateY(.5rem)}to{transform:translateY(0)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}

package/es/rich-text-editor/menu-system/styles/animations.less

@@ -0,0 +1,91 @@
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes zoomIn {
+  from {
+    transform: scale(0.95);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+
+@keyframes zoomOut {
+  from {
+    transform: scale(1);
+  }
+  to {
+    transform: scale(0.95);
+  }
+}
+
+@keyframes zoom {
+  0% {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes slideFromTop {
+  from {
+    transform: translateY(-0.5rem);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideFromRight {
+  from {
+    transform: translateX(0.5rem);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideFromLeft {
+  from {
+    transform: translateX(-0.5rem);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideFromBottom {
+  from {
+    transform: translateY(0.5rem);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/es/rich-text-editor/menu-system/styles/button-colors.css

@@ -0,0 +1 @@
+.tiptap-button{--tt-button-default-bg-color: var(--tt-gray-light-a-100);--tt-button-hover-bg-color: var(--tt-gray-light-200);--tt-button-active-bg-color: var(--tt-brand-color-50);--tt-button-active-bg-color-emphasized: var(--tt-brand-color-100);--tt-button-active-bg-color-subdued: var(--tt-brand-color-50);--tt-button-active-hover-bg-color: var(--tt-brand-color-100);--tt-button-active-hover-bg-color-emphasized: var(--tt-brand-color-200);--tt-button-active-hover-bg-color-subdued: var(--tt-brand-color-100);--tt-button-disabled-bg-color: var(--tt-gray-light-a-50);--tt-button-default-text-color: var(--tt-gray-light-a-600);--tt-button-hover-text-color: var(--tt-gray-light-a-900);--tt-button-active-text-color: var(--tt-gray-light-a-900);--tt-button-active-text-color-emphasized: var(--tt-gray-light-a-900);--tt-button-active-text-color-subdued: var(--tt-gray-light-a-900);--tt-button-disabled-text-color: var(--tt-gray-light-a-400);--tt-button-default-icon-color: var(--tt-gray-light-a-600);--tt-button-hover-icon-color: var(--tt-gray-light-a-900);--tt-button-active-icon-color: var(--tt-brand-color-500);--tt-button-active-icon-color-emphasized: var(--tt-brand-color-600);--tt-button-active-icon-color-subdued: var(--tt-gray-light-a-900);--tt-button-disabled-icon-color: var(--tt-gray-light-a-400)}.dark .tiptap-button{--tt-button-default-bg-color: var(--tt-gray-dark-a-100);--tt-button-hover-bg-color: var(--tt-gray-dark-200);--tt-button-active-bg-color: var(--tt-brand-color-900);--tt-button-active-bg-color-emphasized: var(--tt-brand-color-800);--tt-button-active-bg-color-subdued: var(--tt-brand-color-900);--tt-button-active-hover-bg-color: var(--tt-brand-color-800);--tt-button-active-hover-bg-color-emphasized: var(--tt-brand-color-700);--tt-button-active-hover-bg-color-subdued: var(--tt-brand-color-800);--tt-button-disabled-bg-color: var(--tt-gray-dark-a-50)}.dark .tiptap-button{--tt-button-default-text-color: var(--tt-gray-dark-a-600);--tt-button-hover-text-color: var(--tt-gray-dark-a-900);--tt-button-active-text-color: var(--tt-gray-dark-a-900);--tt-button-active-text-color-emphasized: var(--tt-gray-dark-a-900);--tt-button-active-text-color-subdued: var(--tt-gray-dark-a-900);--tt-button-disabled-text-color: var(--tt-gray-dark-a-300)}.dark .tiptap-button{--tt-button-default-icon-color: var(--tt-gray-dark-a-600);--tt-button-hover-icon-color: var(--tt-gray-dark-a-900);--tt-button-active-icon-color: var(--tt-brand-color-400);--tt-button-active-icon-color-emphasized: var(--tt-brand-color-400);--tt-button-active-icon-color-subdued: var(--tt-gray-dark-a-900);--tt-button-disabled-icon-color: var(--tt-gray-dark-a-400)}.tiptap-button[data-style=ghost]{--tt-button-default-bg-color: var(--transparent);--tt-button-hover-bg-color: var(--tt-gray-light-200);--tt-button-active-bg-color: var(--tt-brand-color-50);--tt-button-active-bg-color-emphasized: var(--tt-brand-color-100);--tt-button-active-bg-color-subdued: var(--tt-brand-color-50);--tt-button-active-hover-bg-color: var(--tt-brand-color-100);--tt-button-active-hover-bg-color-emphasized: var(--tt-brand-color-200);--tt-button-active-hover-bg-color-subdued: var(--tt-brand-color-100);--tt-button-disabled-bg-color: var(--transparent)}.dark .tiptap-button[data-style=ghost]{--tt-button-default-bg-color: var(--transparent);--tt-button-hover-bg-color: var(--tt-gray-dark-200);--tt-button-active-bg-color: var(--tt-brand-color-900);--tt-button-active-bg-color-emphasized: var(--tt-brand-color-800);--tt-button-active-bg-color-subdued: var(--tt-brand-color-900);--tt-button-active-hover-bg-color: var(--tt-brand-color-800);--tt-button-active-hover-bg-color-emphasized: var(--tt-brand-color-700);--tt-button-active-hover-bg-color-subdued: var(--tt-brand-color-800);--tt-button-disabled-bg-color: var(--transparent)}.tiptap-button[data-style=primary]{--tt-button-default-bg-color: var(--tt-brand-color-500);--tt-button-hover-bg-color: var(--tt-brand-color-600);--tt-button-active-bg-color: var(--tt-brand-color-100);--tt-button-active-bg-color-emphasized: var(--tt-brand-color-100);--tt-button-active-bg-color-subdued: var(--tt-brand-color-100);--tt-button-active-hover-bg-color: var(--tt-brand-color-200);--tt-button-active-hover-bg-color-emphasized: var(--tt-brand-color-200);--tt-button-active-hover-bg-color-subdued: var(--tt-brand-color-200);--tt-button-disabled-bg-color: var(--tt-gray-light-a-100);--tt-button-default-text-color: var(--white);--tt-button-hover-text-color: var(--white);--tt-button-active-text-color: var(--tt-gray-light-a-900);--tt-button-default-icon-color: var(--white);--tt-button-hover-icon-color: var(--white);--tt-button-active-icon-color: var(--tt-brand-color-600)}.dark .tiptap-button[data-style=primary]{--tt-button-default-bg-color: var(--tt-brand-color-500);--tt-button-hover-bg-color: var(--tt-brand-color-600);--tt-button-active-bg-color: var(--tt-brand-color-900);--tt-button-active-bg-color-emphasized: var(--tt-brand-color-900);--tt-button-active-bg-color-subdued: var(--tt-brand-color-900);--tt-button-active-hover-bg-color: var(--tt-brand-color-800);--tt-button-active-hover-bg-color-emphasized: var(--tt-brand-color-800);--tt-button-active-hover-bg-color-subdued: var(--tt-brand-color-800);--tt-button-disabled-bg-color: var(--tt-gray-dark-a-100)}

package/es/rich-text-editor/menu-system/styles/button-colors.less

@@ -0,0 +1,142 @@
+
+.tiptap-button {
+  /************************************************** 
+      Default button background color 
+  **************************************************/
+
+  /* Light mode */
+  --tt-button-default-bg-color: var(--tt-gray-light-a-100);
+  --tt-button-hover-bg-color: var(--tt-gray-light-200);
+  --tt-button-active-bg-color: var(--tt-brand-color-50);
+  --tt-button-active-bg-color-emphasized: var(--tt-brand-color-100); 
+  --tt-button-active-bg-color-subdued: var(--tt-brand-color-50); 
+  --tt-button-active-hover-bg-color: var(--tt-brand-color-100);
+  --tt-button-active-hover-bg-color-emphasized: var(--tt-brand-color-200); 
+  --tt-button-active-hover-bg-color-subdued: var(--tt-brand-color-100); 
+  --tt-button-disabled-bg-color: var(--tt-gray-light-a-50);
+
+  /* Dark mode */
+  .dark & {
+    --tt-button-default-bg-color: var(--tt-gray-dark-a-100);
+    --tt-button-hover-bg-color: var(--tt-gray-dark-200);
+    --tt-button-active-bg-color: var(--tt-brand-color-900);
+    --tt-button-active-bg-color-emphasized: var(--tt-brand-color-800); 
+    --tt-button-active-bg-color-subdued: var(--tt-brand-color-900); 
+    --tt-button-active-hover-bg-color: var(--tt-brand-color-800);
+    --tt-button-active-hover-bg-color-emphasized: var(--tt-brand-color-700); 
+    --tt-button-active-hover-bg-color-subdued: var(--tt-brand-color-800); 
+    --tt-button-disabled-bg-color: var(--tt-gray-dark-a-50);
+  }
+
+  /************************************************** 
+      Default button text color 
+  **************************************************/
+
+  /* Light mode */
+  --tt-button-default-text-color: var(--tt-gray-light-a-600);
+  --tt-button-hover-text-color: var(--tt-gray-light-a-900);
+  --tt-button-active-text-color: var(--tt-gray-light-a-900);
+  --tt-button-active-text-color-emphasized: var(--tt-gray-light-a-900);
+  --tt-button-active-text-color-subdued: var(--tt-gray-light-a-900);
+  --tt-button-disabled-text-color: var(--tt-gray-light-a-400);
+
+  /* Dark mode */
+  .dark & {
+    --tt-button-default-text-color: var(--tt-gray-dark-a-600);
+    --tt-button-hover-text-color: var(--tt-gray-dark-a-900);
+    --tt-button-active-text-color: var(--tt-gray-dark-a-900);
+    --tt-button-active-text-color-emphasized: var(--tt-gray-dark-a-900);
+    --tt-button-active-text-color-subdued: var(--tt-gray-dark-a-900);
+    --tt-button-disabled-text-color: var(--tt-gray-dark-a-300);
+  }
+
+  /************************************************** 
+      Default button icon color 
+  **************************************************/
+
+  /* Light mode */
+  --tt-button-default-icon-color: var(--tt-gray-light-a-600);
+  --tt-button-hover-icon-color: var(--tt-gray-light-a-900);
+  --tt-button-active-icon-color: var(--tt-brand-color-500);
+  --tt-button-active-icon-color-emphasized: var(--tt-brand-color-600);
+  --tt-button-active-icon-color-subdued: var(--tt-gray-light-a-900);
+  --tt-button-disabled-icon-color: var(--tt-gray-light-a-400);
+
+  /* Dark mode */
+  .dark & {
+    --tt-button-default-icon-color: var(--tt-gray-dark-a-600);
+    --tt-button-hover-icon-color: var(--tt-gray-dark-a-900);
+    --tt-button-active-icon-color: var(--tt-brand-color-400);
+    --tt-button-active-icon-color-emphasized: var(--tt-brand-color-400);
+    --tt-button-active-icon-color-subdued: var(--tt-gray-dark-a-900);
+    --tt-button-disabled-icon-color: var(--tt-gray-dark-a-400);
+  }
+
+  /* ----------------------------------------------------------------
+      --------------------------- GHOST BUTTON --------------------------
+      ---------------------------------------------------------------- */
+
+  &[data-style="ghost"] {
+    /* Light mode */
+    --tt-button-default-bg-color: var(--transparent);
+    --tt-button-hover-bg-color: var(--tt-gray-light-200);
+    --tt-button-active-bg-color: var(--tt-brand-color-50);
+    --tt-button-active-bg-color-emphasized: var(--tt-brand-color-100); 
+    --tt-button-active-bg-color-subdued: var(--tt-brand-color-50); 
+    --tt-button-active-hover-bg-color: var(--tt-brand-color-100);
+    --tt-button-active-hover-bg-color-emphasized: var(--tt-brand-color-200); 
+    --tt-button-active-hover-bg-color-subdued: var(--tt-brand-color-100); 
+    --tt-button-disabled-bg-color: var(--transparent);
+
+    /* Dark mode */
+    .dark & {
+      --tt-button-default-bg-color: var(--transparent);
+      --tt-button-hover-bg-color: var(--tt-gray-dark-200);
+      --tt-button-active-bg-color: var(--tt-brand-color-900);
+      --tt-button-active-bg-color-emphasized: var(--tt-brand-color-800); 
+      --tt-button-active-bg-color-subdued: var(--tt-brand-color-900); 
+      --tt-button-active-hover-bg-color: var(--tt-brand-color-800);
+      --tt-button-active-hover-bg-color-emphasized: var(--tt-brand-color-700); 
+      --tt-button-active-hover-bg-color-subdued: var(--tt-brand-color-800); 
+      --tt-button-disabled-bg-color: var(--transparent);
+    }
+  }
+
+  /* ----------------------------------------------------------------
+      -------------------------- PRIMARY BUTTON -------------------------
+      ---------------------------------------------------------------- */
+
+  &[data-style="primary"] {
+    /* Light mode */
+    --tt-button-default-bg-color: var(--tt-brand-color-500);
+    --tt-button-hover-bg-color: var(--tt-brand-color-600);
+    --tt-button-active-bg-color: var(--tt-brand-color-100);
+    --tt-button-active-bg-color-emphasized: var(--tt-brand-color-100); 
+    --tt-button-active-bg-color-subdued: var(--tt-brand-color-100); 
+    --tt-button-active-hover-bg-color: var(--tt-brand-color-200);
+    --tt-button-active-hover-bg-color-emphasized: var(--tt-brand-color-200); 
+    --tt-button-active-hover-bg-color-subdued: var(--tt-brand-color-200); 
+    --tt-button-disabled-bg-color: var(--tt-gray-light-a-100);
+
+    /* Dark mode */
+    .dark & {
+      --tt-button-default-bg-color: var(--tt-brand-color-500);
+      --tt-button-hover-bg-color: var(--tt-brand-color-600);
+      --tt-button-active-bg-color: var(--tt-brand-color-900);
+      --tt-button-active-bg-color-emphasized: var(--tt-brand-color-900); 
+      --tt-button-active-bg-color-subdued: var(--tt-brand-color-900); 
+      --tt-button-active-hover-bg-color: var(--tt-brand-color-800);
+      --tt-button-active-hover-bg-color-emphasized: var(--tt-brand-color-800); 
+      --tt-button-active-hover-bg-color-subdued: var(--tt-brand-color-800); 
+      --tt-button-disabled-bg-color: var(--tt-gray-dark-a-100);
+    }
+
+    --tt-button-default-text-color: var(--white);
+    --tt-button-hover-text-color: var(--white);
+    --tt-button-active-text-color: var(--tt-gray-light-a-900);
+
+    --tt-button-default-icon-color: var(--white);
+    --tt-button-hover-icon-color: var(--white);
+    --tt-button-active-icon-color: var(--tt-brand-color-600);
+  }
+}

package/es/rich-text-editor/menu-system/styles/button-group.css

@@ -0,0 +1 @@
+:root{overflow-wrap:break-word;-webkit-text-size-adjust:none;text-size-adjust:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--tt-gray-light-a-50: rgba(56, 56, 56, .04);--tt-gray-light-a-100: rgba(15, 22, 36, .05);--tt-gray-light-a-200: rgba(37, 39, 45, .1);--tt-gray-light-a-300: rgba(47, 50, 55, .2);--tt-gray-light-a-400: rgba(40, 44, 51, .42);--tt-gray-light-a-500: rgba(52, 55, 60, .64);--tt-gray-light-a-600: rgba(36, 39, 46, .78);--tt-gray-light-a-700: rgba(35, 37, 42, .87);--tt-gray-light-a-800: rgba(30, 32, 36, .95);--tt-gray-light-a-900: rgba(29, 30, 32, .98);--tt-gray-light-50: #fafafa;--tt-gray-light-100: #f4f4f5;--tt-gray-light-200: #eaeaeb;--tt-gray-light-300: #d5d6d7;--tt-gray-light-400: #a6a7ab;--tt-gray-light-500: #7d7f82;--tt-gray-light-600: #53565a;--tt-gray-light-700: #404145;--tt-gray-light-800: #2c2d30;--tt-gray-light-900: #222325;--tt-gray-dark-a-50: rgba(232, 232, 253, .05);--tt-gray-dark-a-100: rgba(231, 231, 243, .07);--tt-gray-dark-a-200: rgba(238, 238, 246, .11);--tt-gray-dark-a-300: rgba(239, 239, 245, .22);--tt-gray-dark-a-400: rgba(244, 244, 255, .37);--tt-gray-dark-a-500: rgba(236, 238, 253, .5);--tt-gray-dark-a-600: rgba(247, 247, 253, .64);--tt-gray-dark-a-700: rgba(251, 251, 254, .75);--tt-gray-dark-a-800: rgba(253, 253, 253, .88);--tt-gray-dark-a-900: rgba(255, 255, 255, .96);--tt-gray-dark-50: #19191a;--tt-gray-dark-100: #202022;--tt-gray-dark-200: #2d2d2f;--tt-gray-dark-300: #464649;--tt-gray-dark-400: #636369;--tt-gray-dark-500: #7c7c83;--tt-gray-dark-600: #a3a3a8;--tt-gray-dark-700: #c0c0c3;--tt-gray-dark-800: #e0e0e1;--tt-gray-dark-900: #f5f5f5;--tt-brand-color-50: #efeeff;--tt-brand-color-100: #dedbff;--tt-brand-color-200: #c3bdff;--tt-brand-color-300: #9d8aff;--tt-brand-color-400: #7a52ff;--tt-brand-color-500: #6229ff;--tt-brand-color-600: #5400e5;--tt-brand-color-700: #4b00cc;--tt-brand-color-800: #380099;--tt-brand-color-900: #2b1966;--tt-brand-color-950: hsl(257, 100%, 9%);--tt-color-green-inc-5: hsl(129, 100%, 97%);--tt-color-green-inc-4: hsl(129, 100%, 92%);--tt-color-green-inc-3: hsl(131, 100%, 86%);--tt-color-green-inc-2: hsl(133, 98%, 78%);--tt-color-green-inc-1: hsl(137, 99%, 70%);--tt-color-green-base: hsl(147, 99%, 50%);--tt-color-green-dec-1: hsl(147, 97%, 41%);--tt-color-green-dec-2: hsl(146, 98%, 32%);--tt-color-green-dec-3: hsl(146, 100%, 24%);--tt-color-green-dec-4: hsl(144, 100%, 16%);--tt-color-green-dec-5: hsl(140, 100%, 9%);--tt-color-yellow-inc-5: hsl(50, 100%, 97%);--tt-color-yellow-inc-4: hsl(50, 100%, 91%);--tt-color-yellow-inc-3: hsl(50, 100%, 84%);--tt-color-yellow-inc-2: hsl(50, 100%, 77%);--tt-color-yellow-inc-1: hsl(50, 100%, 68%);--tt-color-yellow-base: hsl(52, 100%, 50%);--tt-color-yellow-dec-1: hsl(52, 100%, 41%);--tt-color-yellow-dec-2: hsl(52, 100%, 32%);--tt-color-yellow-dec-3: hsl(52, 100%, 24%);--tt-color-yellow-dec-4: hsl(51, 100%, 16%);--tt-color-yellow-dec-5: hsl(50, 100%, 9%);--tt-color-red-inc-5: hsl(11, 100%, 96%);--tt-color-red-inc-4: hsl(11, 100%, 88%);--tt-color-red-inc-3: hsl(10, 100%, 80%);--tt-color-red-inc-2: hsl(9, 100%, 73%);--tt-color-red-inc-1: hsl(7, 100%, 64%);--tt-color-red-base: hsl(7, 100%, 54%);--tt-color-red-dec-1: hsl(7, 100%, 41%);--tt-color-red-dec-2: hsl(5, 100%, 32%);--tt-color-red-dec-3: hsl(4, 100%, 24%);--tt-color-red-dec-4: hsl(3, 100%, 16%);--tt-color-red-dec-5: hsl(1, 100%, 9%);--white: #ffffff;--black: #0e0e11;--transparent: rgba(255, 255, 255, 0);--tt-shadow-elevated-md: 0px 16px 48px 0px rgba(17, 24, 39, .04), 0px 12px 24px 0px rgba(17, 24, 39, .04), 0px 6px 8px 0px rgba(17, 24, 39, .02), 0px 2px 3px 0px rgba(17, 24, 39, .02);--tt-radius-xxs: .125rem;--tt-radius-xs: .25rem;--tt-radius-sm: .375rem;--tt-radius-md: .5rem;--tt-radius-lg: .75rem;--tt-radius-xl: 1rem;--tt-transition-duration-short: .1s;--tt-transition-duration-default: .2s;--tt-transition-duration-long: .64s;--tt-transition-easing-default: cubic-bezier(.46, .03, .52, .96);--tt-transition-easing-cubic: cubic-bezier(.65, .05, .36, 1);--tt-transition-easing-quart: cubic-bezier(.77, 0, .18, 1);--tt-transition-easing-circ: cubic-bezier(.79, .14, .15, .86);--tt-transition-easing-back: cubic-bezier(.68, -.55, .27, 1.55);--tt-accent-contrast: 8%;--tt-destructive-contrast: 8%;--tt-foreground-contrast: 8%}:root,:root *,:root :before,:root :after{box-sizing:border-box;transition:none var(--tt-transition-duration-default) var(--tt-transition-easing-default)}:root{--tt-bg-color: var(--white);--tt-border-color: var(--tt-gray-light-a-200);--tt-border-color-tint: var(--tt-gray-light-a-100);--tt-sidebar-bg-color: var(--tt-gray-light-100);--tt-scrollbar-color: var(--tt-gray-light-a-200);--tt-cursor-color: var(--tt-brand-color-500);--tt-selection-color: rgba(157, 138, 255, .2);--tt-card-bg-color: var(--white);--tt-card-border-color: var(--tt-gray-light-a-100)}.dark{--tt-bg-color: var(--black);--tt-border-color: var(--tt-gray-dark-a-200);--tt-border-color-tint: var(--tt-gray-dark-a-100);--tt-sidebar-bg-color: var(--tt-gray-dark-100);--tt-scrollbar-color: var(--tt-gray-dark-a-200);--tt-cursor-color: var(--tt-brand-color-400);--tt-selection-color: rgba(122, 82, 255, .2);--tt-card-bg-color: var(--tt-gray-dark-50);--tt-card-border-color: var(--tt-gray-dark-a-50);--tt-shadow-elevated-md: 0px 16px 48px 0px rgba(0, 0, 0, .5), 0px 12px 24px 0px rgba(0, 0, 0, .24), 0px 6px 8px 0px rgba(0, 0, 0, .22), 0px 2px 3px 0px rgba(0, 0, 0, .12)}:root{--tt-color-text-gray: hsl(45, 2%, 46%);--tt-color-text-brown: hsl(19, 31%, 47%);--tt-color-text-orange: hsl(30, 89%, 45%);--tt-color-text-yellow: hsl(38, 62%, 49%);--tt-color-text-green: hsl(148, 32%, 39%);--tt-color-text-blue: hsl(202, 54%, 43%);--tt-color-text-purple: hsl(274, 32%, 54%);--tt-color-text-pink: hsl(328, 49%, 53%);--tt-color-text-red: hsl(2, 62%, 55%);--tt-color-text-gray-contrast: hsla(39, 26%, 26%, .15);--tt-color-text-brown-contrast: hsla(18, 43%, 69%, .35);--tt-color-text-orange-contrast: hsla(24, 73%, 55%, .27);--tt-color-text-yellow-contrast: hsla(44, 82%, 59%, .39);--tt-color-text-green-contrast: hsla(126, 29%, 60%, .27);--tt-color-text-blue-contrast: hsla(202, 54%, 59%, .27);--tt-color-text-purple-contrast: hsla(274, 37%, 64%, .27);--tt-color-text-pink-contrast: hsla(331, 60%, 71%, .27);--tt-color-text-red-contrast: hsla(8, 79%, 79%, .4)}.dark{--tt-color-text-gray: hsl(0, 0%, 61%);--tt-color-text-brown: hsl(18, 35%, 58%);--tt-color-text-orange: hsl(25, 53%, 53%);--tt-color-text-yellow: hsl(36, 54%, 55%);--tt-color-text-green: hsl(145, 32%, 47%);--tt-color-text-blue: hsl(202, 64%, 52%);--tt-color-text-purple: hsl(270, 55%, 62%);--tt-color-text-pink: hsl(329, 57%, 58%);--tt-color-text-red: hsl(1, 69%, 60%);--tt-color-text-gray-contrast: hsla(0, 0%, 100%, .09);--tt-color-text-brown-contrast: hsla(17, 45%, 50%, .25);--tt-color-text-orange-contrast: hsla(27, 82%, 53%, .2);--tt-color-text-yellow-contrast: hsla(35, 49%, 47%, .2);--tt-color-text-green-contrast: hsla(151, 55%, 39%, .2);--tt-color-text-blue-contrast: hsla(202, 54%, 43%, .2);--tt-color-text-purple-contrast: hsla(271, 56%, 60%, .18);--tt-color-text-pink-contrast: hsla(331, 67%, 58%, .22);--tt-color-text-red-contrast: hsla(0, 67%, 60%, .25)}:root{--tt-color-highlight-yellow: #fef9c3;--tt-color-highlight-green: #dcfce7;--tt-color-highlight-blue: #e0f2fe;--tt-color-highlight-purple: #f3e8ff;--tt-color-highlight-red: #ffe4e6;--tt-color-highlight-gray: #f8f8f7;--tt-color-highlight-brown: #f4eeee;--tt-color-highlight-orange: #fbecdd;--tt-color-highlight-pink: #fcf1f6;--tt-color-highlight-yellow-contrast: #fbe604;--tt-color-highlight-green-contrast: #c7fad8;--tt-color-highlight-blue-contrast: #ceeafd;--tt-color-highlight-purple-contrast: #e4ccff;--tt-color-highlight-red-contrast: #ffccd0;--tt-color-highlight-gray-contrast: rgba(84, 72, 49, .15);--tt-color-highlight-brown-contrast: rgba(210, 162, 141, .35);--tt-color-highlight-orange-contrast: rgba(224, 124, 57, .27);--tt-color-highlight-pink-contrast: rgba(225, 136, 179, .27)}.dark{--tt-color-highlight-yellow: #6b6524;--tt-color-highlight-green: #509568;--tt-color-highlight-blue: #6e92aa;--tt-color-highlight-purple: #583e74;--tt-color-highlight-red: #743e42;--tt-color-highlight-gray: #2f2f2f;--tt-color-highlight-brown: #4a3228;--tt-color-highlight-orange: #5c3b23;--tt-color-highlight-pink: #4e2c3c;--tt-color-highlight-yellow-contrast: #58531e;--tt-color-highlight-green-contrast: #47855d;--tt-color-highlight-blue-contrast: #5e86a1;--tt-color-highlight-purple-contrast: #4c3564;--tt-color-highlight-red-contrast: #643539;--tt-color-highlight-gray-contrast: rgba(255, 255, 255, .094);--tt-color-highlight-brown-contrast: rgba(184, 101, 69, .25);--tt-color-highlight-orange-contrast: rgba(233, 126, 37, .2);--tt-color-highlight-pink-contrast: rgba(220, 76, 145, .22)}.tiptap-button-group{position:relative;display:flex;vertical-align:middle}.tiptap-button-group[data-orientation=vertical]{flex-direction:column;align-items:flex-start;justify-content:center;min-width:-webkit-max-content;min-width:max-content}.tiptap-button-group[data-orientation=vertical]>.tiptap-button{width:100%}.tiptap-button-group[data-orientation=horizontal]{gap:.125rem;flex-direction:row;align-items:center}

package/es/rich-text-editor/menu-system/styles/button-group.less

@@ -0,0 +1,23 @@
+@import './variables.less';
+.tiptap-button-group {
+  position: relative;
+  display: flex;
+  vertical-align: middle;
+
+  &[data-orientation="vertical"] {
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    min-width: max-content;
+
+    > .tiptap-button {
+      width: 100%;
+    }
+  }
+
+  &[data-orientation="horizontal"] {
+    gap: 0.125rem;
+    flex-direction: row;
+    align-items: center;
+  }
+}

package/es/rich-text-editor/menu-system/styles/button.css

@@ -0,0 +1 @@
+:root{overflow-wrap:break-word;-webkit-text-size-adjust:none;text-size-adjust:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--tt-gray-light-a-50: rgba(56, 56, 56, .04);--tt-gray-light-a-100: rgba(15, 22, 36, .05);--tt-gray-light-a-200: rgba(37, 39, 45, .1);--tt-gray-light-a-300: rgba(47, 50, 55, .2);--tt-gray-light-a-400: rgba(40, 44, 51, .42);--tt-gray-light-a-500: rgba(52, 55, 60, .64);--tt-gray-light-a-600: rgba(36, 39, 46, .78);--tt-gray-light-a-700: rgba(35, 37, 42, .87);--tt-gray-light-a-800: rgba(30, 32, 36, .95);--tt-gray-light-a-900: rgba(29, 30, 32, .98);--tt-gray-light-50: #fafafa;--tt-gray-light-100: #f4f4f5;--tt-gray-light-200: #eaeaeb;--tt-gray-light-300: #d5d6d7;--tt-gray-light-400: #a6a7ab;--tt-gray-light-500: #7d7f82;--tt-gray-light-600: #53565a;--tt-gray-light-700: #404145;--tt-gray-light-800: #2c2d30;--tt-gray-light-900: #222325;--tt-gray-dark-a-50: rgba(232, 232, 253, .05);--tt-gray-dark-a-100: rgba(231, 231, 243, .07);--tt-gray-dark-a-200: rgba(238, 238, 246, .11);--tt-gray-dark-a-300: rgba(239, 239, 245, .22);--tt-gray-dark-a-400: rgba(244, 244, 255, .37);--tt-gray-dark-a-500: rgba(236, 238, 253, .5);--tt-gray-dark-a-600: rgba(247, 247, 253, .64);--tt-gray-dark-a-700: rgba(251, 251, 254, .75);--tt-gray-dark-a-800: rgba(253, 253, 253, .88);--tt-gray-dark-a-900: rgba(255, 255, 255, .96);--tt-gray-dark-50: #19191a;--tt-gray-dark-100: #202022;--tt-gray-dark-200: #2d2d2f;--tt-gray-dark-300: #464649;--tt-gray-dark-400: #636369;--tt-gray-dark-500: #7c7c83;--tt-gray-dark-600: #a3a3a8;--tt-gray-dark-700: #c0c0c3;--tt-gray-dark-800: #e0e0e1;--tt-gray-dark-900: #f5f5f5;--tt-brand-color-50: #efeeff;--tt-brand-color-100: #dedbff;--tt-brand-color-200: #c3bdff;--tt-brand-color-300: #9d8aff;--tt-brand-color-400: #7a52ff;--tt-brand-color-500: #6229ff;--tt-brand-color-600: #5400e5;--tt-brand-color-700: #4b00cc;--tt-brand-color-800: #380099;--tt-brand-color-900: #2b1966;--tt-brand-color-950: hsl(257, 100%, 9%);--tt-color-green-inc-5: hsl(129, 100%, 97%);--tt-color-green-inc-4: hsl(129, 100%, 92%);--tt-color-green-inc-3: hsl(131, 100%, 86%);--tt-color-green-inc-2: hsl(133, 98%, 78%);--tt-color-green-inc-1: hsl(137, 99%, 70%);--tt-color-green-base: hsl(147, 99%, 50%);--tt-color-green-dec-1: hsl(147, 97%, 41%);--tt-color-green-dec-2: hsl(146, 98%, 32%);--tt-color-green-dec-3: hsl(146, 100%, 24%);--tt-color-green-dec-4: hsl(144, 100%, 16%);--tt-color-green-dec-5: hsl(140, 100%, 9%);--tt-color-yellow-inc-5: hsl(50, 100%, 97%);--tt-color-yellow-inc-4: hsl(50, 100%, 91%);--tt-color-yellow-inc-3: hsl(50, 100%, 84%);--tt-color-yellow-inc-2: hsl(50, 100%, 77%);--tt-color-yellow-inc-1: hsl(50, 100%, 68%);--tt-color-yellow-base: hsl(52, 100%, 50%);--tt-color-yellow-dec-1: hsl(52, 100%, 41%);--tt-color-yellow-dec-2: hsl(52, 100%, 32%);--tt-color-yellow-dec-3: hsl(52, 100%, 24%);--tt-color-yellow-dec-4: hsl(51, 100%, 16%);--tt-color-yellow-dec-5: hsl(50, 100%, 9%);--tt-color-red-inc-5: hsl(11, 100%, 96%);--tt-color-red-inc-4: hsl(11, 100%, 88%);--tt-color-red-inc-3: hsl(10, 100%, 80%);--tt-color-red-inc-2: hsl(9, 100%, 73%);--tt-color-red-inc-1: hsl(7, 100%, 64%);--tt-color-red-base: hsl(7, 100%, 54%);--tt-color-red-dec-1: hsl(7, 100%, 41%);--tt-color-red-dec-2: hsl(5, 100%, 32%);--tt-color-red-dec-3: hsl(4, 100%, 24%);--tt-color-red-dec-4: hsl(3, 100%, 16%);--tt-color-red-dec-5: hsl(1, 100%, 9%);--white: #ffffff;--black: #0e0e11;--transparent: rgba(255, 255, 255, 0);--tt-shadow-elevated-md: 0px 16px 48px 0px rgba(17, 24, 39, .04), 0px 12px 24px 0px rgba(17, 24, 39, .04), 0px 6px 8px 0px rgba(17, 24, 39, .02), 0px 2px 3px 0px rgba(17, 24, 39, .02);--tt-radius-xxs: .125rem;--tt-radius-xs: .25rem;--tt-radius-sm: .375rem;--tt-radius-md: .5rem;--tt-radius-lg: .75rem;--tt-radius-xl: 1rem;--tt-transition-duration-short: .1s;--tt-transition-duration-default: .2s;--tt-transition-duration-long: .64s;--tt-transition-easing-default: cubic-bezier(.46, .03, .52, .96);--tt-transition-easing-cubic: cubic-bezier(.65, .05, .36, 1);--tt-transition-easing-quart: cubic-bezier(.77, 0, .18, 1);--tt-transition-easing-circ: cubic-bezier(.79, .14, .15, .86);--tt-transition-easing-back: cubic-bezier(.68, -.55, .27, 1.55);--tt-accent-contrast: 8%;--tt-destructive-contrast: 8%;--tt-foreground-contrast: 8%}:root,:root *,:root :before,:root :after{box-sizing:border-box;transition:none var(--tt-transition-duration-default) var(--tt-transition-easing-default)}:root{--tt-bg-color: var(--white);--tt-border-color: var(--tt-gray-light-a-200);--tt-border-color-tint: var(--tt-gray-light-a-100);--tt-sidebar-bg-color: var(--tt-gray-light-100);--tt-scrollbar-color: var(--tt-gray-light-a-200);--tt-cursor-color: var(--tt-brand-color-500);--tt-selection-color: rgba(157, 138, 255, .2);--tt-card-bg-color: var(--white);--tt-card-border-color: var(--tt-gray-light-a-100)}.dark{--tt-bg-color: var(--black);--tt-border-color: var(--tt-gray-dark-a-200);--tt-border-color-tint: var(--tt-gray-dark-a-100);--tt-sidebar-bg-color: var(--tt-gray-dark-100);--tt-scrollbar-color: var(--tt-gray-dark-a-200);--tt-cursor-color: var(--tt-brand-color-400);--tt-selection-color: rgba(122, 82, 255, .2);--tt-card-bg-color: var(--tt-gray-dark-50);--tt-card-border-color: var(--tt-gray-dark-a-50);--tt-shadow-elevated-md: 0px 16px 48px 0px rgba(0, 0, 0, .5), 0px 12px 24px 0px rgba(0, 0, 0, .24), 0px 6px 8px 0px rgba(0, 0, 0, .22), 0px 2px 3px 0px rgba(0, 0, 0, .12)}:root{--tt-color-text-gray: hsl(45, 2%, 46%);--tt-color-text-brown: hsl(19, 31%, 47%);--tt-color-text-orange: hsl(30, 89%, 45%);--tt-color-text-yellow: hsl(38, 62%, 49%);--tt-color-text-green: hsl(148, 32%, 39%);--tt-color-text-blue: hsl(202, 54%, 43%);--tt-color-text-purple: hsl(274, 32%, 54%);--tt-color-text-pink: hsl(328, 49%, 53%);--tt-color-text-red: hsl(2, 62%, 55%);--tt-color-text-gray-contrast: hsla(39, 26%, 26%, .15);--tt-color-text-brown-contrast: hsla(18, 43%, 69%, .35);--tt-color-text-orange-contrast: hsla(24, 73%, 55%, .27);--tt-color-text-yellow-contrast: hsla(44, 82%, 59%, .39);--tt-color-text-green-contrast: hsla(126, 29%, 60%, .27);--tt-color-text-blue-contrast: hsla(202, 54%, 59%, .27);--tt-color-text-purple-contrast: hsla(274, 37%, 64%, .27);--tt-color-text-pink-contrast: hsla(331, 60%, 71%, .27);--tt-color-text-red-contrast: hsla(8, 79%, 79%, .4)}.dark{--tt-color-text-gray: hsl(0, 0%, 61%);--tt-color-text-brown: hsl(18, 35%, 58%);--tt-color-text-orange: hsl(25, 53%, 53%);--tt-color-text-yellow: hsl(36, 54%, 55%);--tt-color-text-green: hsl(145, 32%, 47%);--tt-color-text-blue: hsl(202, 64%, 52%);--tt-color-text-purple: hsl(270, 55%, 62%);--tt-color-text-pink: hsl(329, 57%, 58%);--tt-color-text-red: hsl(1, 69%, 60%);--tt-color-text-gray-contrast: hsla(0, 0%, 100%, .09);--tt-color-text-brown-contrast: hsla(17, 45%, 50%, .25);--tt-color-text-orange-contrast: hsla(27, 82%, 53%, .2);--tt-color-text-yellow-contrast: hsla(35, 49%, 47%, .2);--tt-color-text-green-contrast: hsla(151, 55%, 39%, .2);--tt-color-text-blue-contrast: hsla(202, 54%, 43%, .2);--tt-color-text-purple-contrast: hsla(271, 56%, 60%, .18);--tt-color-text-pink-contrast: hsla(331, 67%, 58%, .22);--tt-color-text-red-contrast: hsla(0, 67%, 60%, .25)}:root{--tt-color-highlight-yellow: #fef9c3;--tt-color-highlight-green: #dcfce7;--tt-color-highlight-blue: #e0f2fe;--tt-color-highlight-purple: #f3e8ff;--tt-color-highlight-red: #ffe4e6;--tt-color-highlight-gray: #f8f8f7;--tt-color-highlight-brown: #f4eeee;--tt-color-highlight-orange: #fbecdd;--tt-color-highlight-pink: #fcf1f6;--tt-color-highlight-yellow-contrast: #fbe604;--tt-color-highlight-green-contrast: #c7fad8;--tt-color-highlight-blue-contrast: #ceeafd;--tt-color-highlight-purple-contrast: #e4ccff;--tt-color-highlight-red-contrast: #ffccd0;--tt-color-highlight-gray-contrast: rgba(84, 72, 49, .15);--tt-color-highlight-brown-contrast: rgba(210, 162, 141, .35);--tt-color-highlight-orange-contrast: rgba(224, 124, 57, .27);--tt-color-highlight-pink-contrast: rgba(225, 136, 179, .27)}.dark{--tt-color-highlight-yellow: #6b6524;--tt-color-highlight-green: #509568;--tt-color-highlight-blue: #6e92aa;--tt-color-highlight-purple: #583e74;--tt-color-highlight-red: #743e42;--tt-color-highlight-gray: #2f2f2f;--tt-color-highlight-brown: #4a3228;--tt-color-highlight-orange: #5c3b23;--tt-color-highlight-pink: #4e2c3c;--tt-color-highlight-yellow-contrast: #58531e;--tt-color-highlight-green-contrast: #47855d;--tt-color-highlight-blue-contrast: #5e86a1;--tt-color-highlight-purple-contrast: #4c3564;--tt-color-highlight-red-contrast: #643539;--tt-color-highlight-gray-contrast: rgba(255, 255, 255, .094);--tt-color-highlight-brown-contrast: rgba(184, 101, 69, .25);--tt-color-highlight-orange-contrast: rgba(233, 126, 37, .2);--tt-color-highlight-pink-contrast: rgba(220, 76, 145, .22)}.tiptap-button{--tt-button-default-bg-color: var(--tt-gray-light-a-100);--tt-button-hover-bg-color: var(--tt-gray-light-200);--tt-button-active-bg-color: var(--tt-brand-color-50);--tt-button-active-bg-color-emphasized: var(--tt-brand-color-100);--tt-button-active-bg-color-subdued: var(--tt-brand-color-50);--tt-button-active-hover-bg-color: var(--tt-brand-color-100);--tt-button-active-hover-bg-color-emphasized: var(--tt-brand-color-200);--tt-button-active-hover-bg-color-subdued: var(--tt-brand-color-100);--tt-button-disabled-bg-color: var(--tt-gray-light-a-50);--tt-button-default-text-color: var(--tt-gray-light-a-600);--tt-button-hover-text-color: var(--tt-gray-light-a-900);--tt-button-active-text-color: var(--tt-gray-light-a-900);--tt-button-active-text-color-emphasized: var(--tt-gray-light-a-900);--tt-button-active-text-color-subdued: var(--tt-gray-light-a-900);--tt-button-disabled-text-color: var(--tt-gray-light-a-400);--tt-button-default-icon-color: var(--tt-gray-light-a-600);--tt-button-hover-icon-color: var(--tt-gray-light-a-900);--tt-button-active-icon-color: var(--tt-brand-color-500);--tt-button-active-icon-color-emphasized: var(--tt-brand-color-600);--tt-button-active-icon-color-subdued: var(--tt-gray-light-a-900);--tt-button-disabled-icon-color: var(--tt-gray-light-a-400)}.dark .tiptap-button{--tt-button-default-bg-color: var(--tt-gray-dark-a-100);--tt-button-hover-bg-color: var(--tt-gray-dark-200);--tt-button-active-bg-color: var(--tt-brand-color-900);--tt-button-active-bg-color-emphasized: var(--tt-brand-color-800);--tt-button-active-bg-color-subdued: var(--tt-brand-color-900);--tt-button-active-hover-bg-color: var(--tt-brand-color-800);--tt-button-active-hover-bg-color-emphasized: var(--tt-brand-color-700);--tt-button-active-hover-bg-color-subdued: var(--tt-brand-color-800);--tt-button-disabled-bg-color: var(--tt-gray-dark-a-50)}.dark .tiptap-button{--tt-button-default-text-color: var(--tt-gray-dark-a-600);--tt-button-hover-text-color: var(--tt-gray-dark-a-900);--tt-button-active-text-color: var(--tt-gray-dark-a-900);--tt-button-active-text-color-emphasized: var(--tt-gray-dark-a-900);--tt-button-active-text-color-subdued: var(--tt-gray-dark-a-900);--tt-button-disabled-text-color: var(--tt-gray-dark-a-300)}.dark .tiptap-button{--tt-button-default-icon-color: var(--tt-gray-dark-a-600);--tt-button-hover-icon-color: var(--tt-gray-dark-a-900);--tt-button-active-icon-color: var(--tt-brand-color-400);--tt-button-active-icon-color-emphasized: var(--tt-brand-color-400);--tt-button-active-icon-color-subdued: var(--tt-gray-dark-a-900);--tt-button-disabled-icon-color: var(--tt-gray-dark-a-400)}.tiptap-button[data-style=ghost]{--tt-button-default-bg-color: var(--transparent);--tt-button-hover-bg-color: var(--tt-gray-light-200);--tt-button-active-bg-color: var(--tt-brand-color-50);--tt-button-active-bg-color-emphasized: var(--tt-brand-color-100);--tt-button-active-bg-color-subdued: var(--tt-brand-color-50);--tt-button-active-hover-bg-color: var(--tt-brand-color-100);--tt-button-active-hover-bg-color-emphasized: var(--tt-brand-color-200);--tt-button-active-hover-bg-color-subdued: var(--tt-brand-color-100);--tt-button-disabled-bg-color: var(--transparent)}.dark .tiptap-button[data-style=ghost]{--tt-button-default-bg-color: var(--transparent);--tt-button-hover-bg-color: var(--tt-gray-dark-200);--tt-button-active-bg-color: var(--tt-brand-color-900);--tt-button-active-bg-color-emphasized: var(--tt-brand-color-800);--tt-button-active-bg-color-subdued: var(--tt-brand-color-900);--tt-button-active-hover-bg-color: var(--tt-brand-color-800);--tt-button-active-hover-bg-color-emphasized: var(--tt-brand-color-700);--tt-button-active-hover-bg-color-subdued: var(--tt-brand-color-800);--tt-button-disabled-bg-color: var(--transparent)}.tiptap-button[data-style=primary]{--tt-button-default-bg-color: var(--tt-brand-color-500);--tt-button-hover-bg-color: var(--tt-brand-color-600);--tt-button-active-bg-color: var(--tt-brand-color-100);--tt-button-active-bg-color-emphasized: var(--tt-brand-color-100);--tt-button-active-bg-color-subdued: var(--tt-brand-color-100);--tt-button-active-hover-bg-color: var(--tt-brand-color-200);--tt-button-active-hover-bg-color-emphasized: var(--tt-brand-color-200);--tt-button-active-hover-bg-color-subdued: var(--tt-brand-color-200);--tt-button-disabled-bg-color: var(--tt-gray-light-a-100);--tt-button-default-text-color: var(--white);--tt-button-hover-text-color: var(--white);--tt-button-active-text-color: var(--tt-gray-light-a-900);--tt-button-default-icon-color: var(--white);--tt-button-hover-icon-color: var(--white);--tt-button-active-icon-color: var(--tt-brand-color-600)}.dark .tiptap-button[data-style=primary]{--tt-button-default-bg-color: var(--tt-brand-color-500);--tt-button-hover-bg-color: var(--tt-brand-color-600);--tt-button-active-bg-color: var(--tt-brand-color-900);--tt-button-active-bg-color-emphasized: var(--tt-brand-color-900);--tt-button-active-bg-color-subdued: var(--tt-brand-color-900);--tt-button-active-hover-bg-color: var(--tt-brand-color-800);--tt-button-active-hover-bg-color-emphasized: var(--tt-brand-color-800);--tt-button-active-hover-bg-color-subdued: var(--tt-brand-color-800);--tt-button-disabled-bg-color: var(--tt-gray-dark-a-100)}.tiptap-button{font-size:.875rem;font-weight:500;font-feature-settings:"salt" on,"cv01" on;line-height:1.15;height:2rem;min-width:2rem;border:none;padding:.5rem;gap:.25rem;display:flex;align-items:center;justify-content:center;border-radius:var(--tt-radius-lg, .75rem);transition-property:background,color,opacity;transition-duration:var(--tt-transition-duration-default);transition-timing-function:var(--tt-transition-easing-default);cursor:pointer}.tiptap-button:focus-visible{outline:none}.tiptap-button[data-highlighted=true],.tiptap-button[data-focus-visible=true]{background-color:var(--tt-button-hover-bg-color);color:var(--tt-button-hover-text-color)}.tiptap-button[data-weight=small]{width:1.5rem;min-width:1.5rem;padding-right:0;padding-left:0}.tiptap-button[data-size=large]{font-size:.9375rem;height:2.375rem;min-width:2.375rem;padding:.625rem}.tiptap-button[data-size=small]{font-size:.75rem;line-height:1.2;height:1.5rem;min-width:1.5rem;padding:.3125rem;border-radius:var(--tt-radius-md, .5rem)}.tiptap-button .tiptap-button-text{padding:0 .125rem;flex-grow:1;text-align:left;line-height:1.5rem}.tiptap-button[data-text-trim=on] .tiptap-button-text{text-overflow:ellipsis;overflow:hidden}.tiptap-button .tiptap-button-icon,.tiptap-button .tiptap-button-icon-sub,.tiptap-button .tiptap-button-dropdown-arrows,.tiptap-button .tiptap-button-dropdown-small{flex-shrink:0}.tiptap-button .tiptap-button-icon{width:1rem;height:1rem}.tiptap-button[data-size=large] .tiptap-button-icon{width:1.125rem;height:1.125rem}.tiptap-button[data-size=small] .tiptap-button-icon{width:.875rem;height:.875rem}.tiptap-button .tiptap-button-icon-sub{width:1rem;height:1rem}.tiptap-button[data-size=large] .tiptap-button-icon-sub{width:1.125rem;height:1.125rem}.tiptap-button[data-size=small] .tiptap-button-icon-sub{width:.875rem;height:.875rem}.tiptap-button .tiptap-button-dropdown-arrows{width:.75rem;height:.75rem}.tiptap-button[data-size=large] .tiptap-button-dropdown-arrows{width:.875rem;height:.875rem}.tiptap-button[data-size=small] .tiptap-button-dropdown-arrows,.tiptap-button .tiptap-button-dropdown-small{width:.625rem;height:.625rem}.tiptap-button[data-size=large] .tiptap-button-dropdown-small{width:.75rem;height:.75rem}.tiptap-button[data-size=small] .tiptap-button-dropdown-small{width:.5rem;height:.5rem}.tiptap-button:has(>svg):not(:has(>:not(svg))){gap:.125rem}.tiptap-button:has(>svg):not(:has(>:not(svg)))[data-size=large],.tiptap-button:has(>svg):not(:has(>:not(svg)))[data-size=small]{gap:.125rem}.tiptap-button:has(>svg:nth-of-type(2)):has(>.tiptap-button-dropdown-small):not(:has(>svg:nth-of-type(3))):not(:has(>.tiptap-button-text)){gap:0;padding-right:.25rem}.tiptap-button:has(>svg:nth-of-type(2)):has(>.tiptap-button-dropdown-small):not(:has(>svg:nth-of-type(3))):not(:has(>.tiptap-button-text))[data-size=large]{padding-right:.375rem}.tiptap-button:has(>svg:nth-of-type(2)):has(>.tiptap-button-dropdown-small):not(:has(>svg:nth-of-type(3))):not(:has(>.tiptap-button-text))[data-size=small]{padding-right:.25rem}.tiptap-button .tiptap-button-emoji{width:1rem;display:flex;justify-content:center}.tiptap-button[data-size=large] .tiptap-button-emoji{width:1.125rem}.tiptap-button[data-size=small] .tiptap-button-emoji{width:.875rem}.tiptap-button{background-color:var(--tt-button-default-bg-color);color:var(--tt-button-default-text-color)}.tiptap-button .tiptap-button-icon{color:var(--tt-button-default-icon-color)}.tiptap-button .tiptap-button-icon-sub{color:var(--tt-button-default-icon-sub-color)}.tiptap-button .tiptap-button-dropdown-arrows,.tiptap-button .tiptap-button-dropdown-small{color:var(--tt-button-default-dropdown-arrows-color)}.tiptap-button:hover:not([data-active-item=true]):not(:disabled):not([data-disabled=true]),.tiptap-button[data-active-item=true]:not(:disabled):not([data-disabled=true]),.tiptap-button[data-highlighted]:not([data-highlighted=false]):not(:disabled):not([data-disabled=true]){background-color:var(--tt-button-hover-bg-color);color:var(--tt-button-hover-text-color)}.tiptap-button:hover:not([data-active-item=true]):not(:disabled):not([data-disabled=true]) .tiptap-button-icon,.tiptap-button[data-active-item=true]:not(:disabled):not([data-disabled=true]) .tiptap-button-icon,.tiptap-button[data-highlighted]:not([data-highlighted=false]):not(:disabled):not([data-disabled=true]) .tiptap-button-icon{color:var(--tt-button-hover-icon-color)}.tiptap-button:hover:not([data-active-item=true]):not(:disabled):not([data-disabled=true]) .tiptap-button-icon-sub,.tiptap-button[data-active-item=true]:not(:disabled):not([data-disabled=true]) .tiptap-button-icon-sub,.tiptap-button[data-highlighted]:not([data-highlighted=false]):not(:disabled):not([data-disabled=true]) .tiptap-button-icon-sub{color:var(--tt-button-hover-icon-sub-color)}.tiptap-button:hover:not([data-active-item=true]):not(:disabled):not([data-disabled=true]) .tiptap-button-dropdown-arrows,.tiptap-button[data-active-item=true]:not(:disabled):not([data-disabled=true]) .tiptap-button-dropdown-arrows,.tiptap-button[data-highlighted]:not([data-highlighted=false]):not(:disabled):not([data-disabled=true]) .tiptap-button-dropdown-arrows,.tiptap-button:hover:not([data-active-item=true]):not(:disabled):not([data-disabled=true]) .tiptap-button-dropdown-small,.tiptap-button[data-active-item=true]:not(:disabled):not([data-disabled=true]) .tiptap-button-dropdown-small,.tiptap-button[data-highlighted]:not([data-highlighted=false]):not(:disabled):not([data-disabled=true]) .tiptap-button-dropdown-small{color:var(--tt-button-hover-dropdown-arrows-color)}.tiptap-button[data-active-state=on]:not(:disabled):not([data-disabled=true]),.tiptap-button[data-state=open]:not(:disabled):not([data-disabled=true]){background-color:var(--tt-button-active-bg-color);color:var(--tt-button-active-text-color)}.tiptap-button[data-active-state=on]:not(:disabled):not([data-disabled=true]) .tiptap-button-icon,.tiptap-button[data-state=open]:not(:disabled):not([data-disabled=true]) .tiptap-button-icon{color:var(--tt-button-active-icon-color)}.tiptap-button[data-active-state=on]:not(:disabled):not([data-disabled=true]) .tiptap-button-icon-sub,.tiptap-button[data-state=open]:not(:disabled):not([data-disabled=true]) .tiptap-button-icon-sub{color:var(--tt-button-active-icon-sub-color)}.tiptap-button[data-active-state=on]:not(:disabled):not([data-disabled=true]) .tiptap-button-dropdown-arrows,.tiptap-button[data-state=open]:not(:disabled):not([data-disabled=true]) .tiptap-button-dropdown-arrows,.tiptap-button[data-active-state=on]:not(:disabled):not([data-disabled=true]) .tiptap-button-dropdown-small,.tiptap-button[data-state=open]:not(:disabled):not([data-disabled=true]) .tiptap-button-dropdown-small{color:var(--tt-button-active-dropdown-arrows-color)}.tiptap-button[data-active-state=on]:not(:disabled):not([data-disabled=true]):hover,.tiptap-button[data-state=open]:not(:disabled):not([data-disabled=true]):hover{background-color:var(--tt-button-active-hover-bg-color)}.tiptap-button[data-active-state=on]:not(:disabled):not([data-disabled=true])[data-appearance=emphasized],.tiptap-button[data-state=open]:not(:disabled):not([data-disabled=true])[data-appearance=emphasized]{background-color:var(--tt-button-active-bg-color-emphasized);color:var(--tt-button-active-text-color-emphasized)}.tiptap-button[data-active-state=on]:not(:disabled):not([data-disabled=true])[data-appearance=emphasized] .tiptap-button-icon,.tiptap-button[data-state=open]:not(:disabled):not([data-disabled=true])[data-appearance=emphasized] .tiptap-button-icon{color:var(--tt-button-active-icon-color-emphasized)}.tiptap-button[data-active-state=on]:not(:disabled):not([data-disabled=true])[data-appearance=emphasized] .tiptap-button-icon-sub,.tiptap-button[data-state=open]:not(:disabled):not([data-disabled=true])[data-appearance=emphasized] .tiptap-button-icon-sub{color:var(--tt-button-active-icon-sub-color-emphasized)}.tiptap-button[data-active-state=on]:not(:disabled):not([data-disabled=true])[data-appearance=emphasized] .tiptap-button-dropdown-arrows,.tiptap-button[data-state=open]:not(:disabled):not([data-disabled=true])[data-appearance=emphasized] .tiptap-button-dropdown-arrows,.tiptap-button[data-active-state=on]:not(:disabled):not([data-disabled=true])[data-appearance=emphasized] .tiptap-button-dropdown-small,.tiptap-button[data-state=open]:not(:disabled):not([data-disabled=true])[data-appearance=emphasized] .tiptap-button-dropdown-small{color:var(--tt-button-active-dropdown-arrows-color-emphasized)}.tiptap-button[data-active-state=on]:not(:disabled):not([data-disabled=true])[data-appearance=emphasized]:hover,.tiptap-button[data-state=open]:not(:disabled):not([data-disabled=true])[data-appearance=emphasized]:hover{background-color:var(--tt-button-active-hover-bg-color-emphasized)}.tiptap-button[data-active-state=on]:not(:disabled):not([data-disabled=true])[data-appearance=subdued],.tiptap-button[data-state=open]:not(:disabled):not([data-disabled=true])[data-appearance=subdued]{background-color:var(--tt-button-active-bg-color-subdued);color:var(--tt-button-active-text-color-subdued)}.tiptap-button[data-active-state=on]:not(:disabled):not([data-disabled=true])[data-appearance=subdued] .tiptap-button-icon,.tiptap-button[data-state=open]:not(:disabled):not([data-disabled=true])[data-appearance=subdued] .tiptap-button-icon{color:var(--tt-button-active-icon-color-subdued)}.tiptap-button[data-active-state=on]:not(:disabled):not([data-disabled=true])[data-appearance=subdued] .tiptap-button-icon-sub,.tiptap-button[data-state=open]:not(:disabled):not([data-disabled=true])[data-appearance=subdued] .tiptap-button-icon-sub{color:var(--tt-button-active-icon-sub-color-subdued)}.tiptap-button[data-active-state=on]:not(:disabled):not([data-disabled=true])[data-appearance=subdued] .tiptap-button-dropdown-arrows,.tiptap-button[data-state=open]:not(:disabled):not([data-disabled=true])[data-appearance=subdued] .tiptap-button-dropdown-arrows,.tiptap-button[data-active-state=on]:not(:disabled):not([data-disabled=true])[data-appearance=subdued] .tiptap-button-dropdown-small,.tiptap-button[data-state=open]:not(:disabled):not([data-disabled=true])[data-appearance=subdued] .tiptap-button-dropdown-small{color:var(--tt-button-active-dropdown-arrows-color-subdued)}.tiptap-button[data-active-state=on]:not(:disabled):not([data-disabled=true])[data-appearance=subdued]:hover,.tiptap-button[data-state=open]:not(:disabled):not([data-disabled=true])[data-appearance=subdued]:hover{background-color:var(--tt-button-active-hover-bg-color-subdued)}.tiptap-button[data-active-state=on]:not(:disabled):not([data-disabled=true])[data-appearance=subdued]:hover .tiptap-button-icon,.tiptap-button[data-state=open]:not(:disabled):not([data-disabled=true])[data-appearance=subdued]:hover .tiptap-button-icon{color:var(--tt-button-active-icon-color-subdued)}.tiptap-button:disabled,.tiptap-button[data-disabled=true]{background-color:var(--tt-button-disabled-bg-color);color:var(--tt-button-disabled-text-color);cursor:default}.tiptap-button:disabled .tiptap-button-icon,.tiptap-button[data-disabled=true] .tiptap-button-icon{color:var(--tt-button-disabled-icon-color)}