@mirantes-micro/foundation-design-system 1.2.93 → 1.2.94

package/src/components/tiptap-node/paragraph-node/paragraph-node.css

@@ -0,0 +1,238 @@
+.tiptap.ProseMirror {
+  --tt-collaboration-carets-label: var(--tt-gray-light-900);
+  --link-text-color: var(--tt-brand-color-500);
+  --thread-text: var(--tt-gray-light-900);
+  --placeholder-color: var(--tt-gray-light-a-400);
+  --thread-bg-color: var(--tt-color-yellow-inc-2);
+  --tiptap-ai-insertion-color: var(--tt-brand-color-600);
+}
+
+.dark .tiptap.ProseMirror {
+  --tt-collaboration-carets-label: var(--tt-gray-dark-100);
+  --link-text-color: var(--tt-brand-color-400);
+  --thread-text: var(--tt-gray-dark-900);
+  --placeholder-color: var(--tt-gray-dark-a-400);
+  --thread-bg-color: var(--tt-color-yellow-dec-2);
+  --tiptap-ai-insertion-color: var(--tt-brand-color-400);
+}
+
+/* Top-level positioning */
+.tiptap.ProseMirror>* {
+  position: relative;
+}
+
+/* =====================
+     CORE EDITOR STYLES
+   ===================== */
+.tiptap.ProseMirror {
+  white-space: pre-wrap;
+  outline: none;
+  caret-color: var(--tt-cursor-color);
+}
+
+.tiptap.ProseMirror p:not(:first-child):not(td p):not(th p) {
+  font-size: 1rem;
+  line-height: 1.6;
+  font-weight: normal;
+  margin-top: 20px;
+}
+
+.tiptap.ProseMirror:not(.readonly):not(.ProseMirror-hideselection) ::selection {
+  background-color: var(--tt-selection-color);
+}
+
+.tiptap.ProseMirror:not(.readonly):not(.ProseMirror-hideselection) .selection::selection {
+  background: transparent;
+}
+
+.tiptap.ProseMirror .selection {
+  display: inline;
+  background-color: var(--tt-selection-color);
+}
+
+.tiptap.ProseMirror .ProseMirror-selectednode:not(img):not(pre):not(.react-renderer) {
+  border-radius: var(--tt-radius-md);
+  background-color: var(--tt-selection-color);
+}
+
+.tiptap.ProseMirror .ProseMirror-hideselection {
+  caret-color: transparent;
+}
+
+.tiptap.ProseMirror.resize-cursor {
+  cursor: ew-resize;
+  cursor: col-resize;
+}
+
+/* =====================
+     TEXT DECORATION
+   ===================== */
+.tiptap.ProseMirror a span {
+  text-decoration: underline;
+}
+
+.tiptap.ProseMirror s span {
+  text-decoration: line-through;
+}
+
+.tiptap.ProseMirror u span {
+  text-decoration: underline;
+}
+
+.tiptap.ProseMirror .tiptap-ai-insertion {
+  color: var(--tiptap-ai-insertion-color);
+}
+
+/* =====================
+     COLLABORATION
+   ===================== */
+.tiptap.ProseMirror .collaboration-carets__caret {
+  border-right: 1px solid transparent;
+  border-left: 1px solid transparent;
+  pointer-events: none;
+  margin-left: -1px;
+  margin-right: -1px;
+  position: relative;
+  word-break: normal;
+}
+
+.tiptap.ProseMirror .collaboration-carets__label {
+  color: var(--tt-collaboration-carets-label);
+  border-radius: 0.25rem;
+  border-bottom-left-radius: 0;
+  font-size: 0.75rem;
+  font-weight: 600;
+  left: -1px;
+  line-height: 1;
+  padding: 0.125rem 0.375rem;
+  position: absolute;
+  top: -1.3em;
+  user-select: none;
+  white-space: nowrap;
+}
+
+/* =====================
+        EMOJI
+   ===================== */
+.tiptap.ProseMirror [data-type="emoji"] img {
+  display: inline-block;
+  width: 1.25em;
+  height: 1.25em;
+  cursor: text;
+}
+
+/* =====================
+         LINKS
+   ===================== */
+.tiptap.ProseMirror a {
+  color: var(--link-text-color);
+  text-decoration: underline;
+}
+
+/* =====================
+        MENTION
+   ===================== */
+.tiptap.ProseMirror [data-type="mention"] {
+  display: inline-block;
+  color: var(--tt-brand-color-500);
+}
+
+/* =====================
+        THREADS
+   ===================== */
+.tiptap.ProseMirror .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--inline {
+  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
+  color: var(--thread-text);
+  border-bottom: 2px dashed var(--tt-color-yellow-base);
+  font-weight: 600;
+}
+
+.tiptap.ProseMirror .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--inline.tiptap-thread--selected,
+.tiptap.ProseMirror .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--inline.tiptap-thread--hovered {
+  background-color: var(--thread-bg-color);
+  border-bottom-color: transparent;
+}
+
+/* Block threads with images */
+.tiptap.ProseMirror .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--block:has(img) {
+  outline: 0.125rem solid var(--tt-color-yellow-base);
+  border-radius: var(--tt-radius-xs, 0.25rem);
+  overflow: hidden;
+  width: fit-content;
+}
+
+.tiptap.ProseMirror .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--block:has(img).tiptap-thread--selected {
+  outline-width: 0.25rem;
+  outline-color: var(--tt-color-yellow-base);
+}
+
+.tiptap.ProseMirror .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--block:has(img).tiptap-thread--hovered {
+  outline-width: 0.25rem;
+}
+
+/* Block threads without images */
+.tiptap.ProseMirror .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--block:not(:has(img)) {
+  border-radius: 0.25rem;
+  border-bottom: 0.125rem dashed var(--tt-color-yellow-base);
+  border-top: 0.125rem dashed var(--tt-color-yellow-base);
+  outline: 0.25rem solid transparent;
+}
+
+.tiptap.ProseMirror .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--block:not(:has(img)).tiptap-thread--hovered,
+.tiptap.ProseMirror .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--block:not(:has(img)).tiptap-thread--selected {
+  background-color: var(--tt-color-yellow-base);
+  outline-color: var(--tt-color-yellow-base);
+}
+
+/* Resolved inline */
+.tiptap.ProseMirror .tiptap-thread.tiptap-thread--resolved.tiptap-thread--inline.tiptap-thread--selected {
+  background-color: var(--tt-color-yellow-base);
+  border-color: transparent;
+  opacity: 0.5;
+}
+
+/* React renderer blocks */
+.tiptap.ProseMirror .tiptap-thread.tiptap-thread--block:has(.react-renderer) {
+  margin-top: 3rem;
+  margin-bottom: 3rem;
+}
+
+/* =====================
+     PLACEHOLDER
+   ===================== */
+.is-empty:not(.with-slash)[data-placeholder]:has(> .ProseMirror-trailingBreak:only-child)::before {
+  content: attr(data-placeholder);
+}
+
+.is-empty.with-slash[data-placeholder]:has(> .ProseMirror-trailingBreak:only-child)::before {
+  content: "Write, type '/' for commands…";
+  font-style: italic;
+}
+
+.is-empty[data-placeholder]:has(> .ProseMirror-trailingBreak:only-child)::before {
+  pointer-events: none;
+  height: 0;
+  position: absolute;
+  width: 100%;
+  text-align: inherit;
+  left: 0;
+  right: 0;
+}
+
+.is-empty[data-placeholder]:has(> .ProseMirror-trailingBreak)::before {
+  color: var(--placeholder-color);
+}
+
+/* =====================
+     DROPCURSOR
+   ===================== */
+.prosemirror-dropcursor-block,
+.prosemirror-dropcursor-inline {
+  background: var(--tt-brand-color-400) !important;
+  border-radius: 0.25rem;
+  margin-left: -1px;
+  margin-right: -1px;
+  width: 100%;
+  height: 0.188rem;
+  cursor: grabbing;
+}

package/src/components/tiptap-templates/simple/simple-editor.css

@@ -0,0 +1,93 @@
+@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
+
+/* ---------- ROOT VARIABLES (LIGHT / DARK) ---------- */
+
+body {
+  --tt-toolbar-height: 44px;
+  --tt-theme-text: var(--tt-gray-light-900);
+}
+
+/* dark mode */
+.dark body {
+  --tt-theme-text: var(--tt-gray-dark-900);
+}
+
+/* ---------- BASE STYLES ---------- */
+
+body {
+  font-family: "Inter", sans-serif;
+  color: var(--tt-theme-text);
+  font-optical-sizing: auto;
+  font-weight: 400;
+  font-style: normal;
+  padding: 0;
+  overscroll-behavior-y: none;
+}
+
+html,
+body {
+  overscroll-behavior-x: none;
+}
+
+html,
+body,
+#root,
+#app {
+  height: 100%;
+  background-color: var(--tt-bg-color);
+}
+
+/* ---------- SCROLLBAR ---------- */
+
+::-webkit-scrollbar {
+  width: 0.25rem;
+}
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--tt-scrollbar-color) transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--tt-scrollbar-color);
+  border-radius: 9999px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* ---------- TIPTAP STYLES ---------- */
+
+.tiptap.ProseMirror {
+  font-family: "DM Sans", sans-serif;
+}
+
+/* ---------- SIMPLE EDITOR ---------- */
+
+.simple-editor-wrapper {
+  width: 100vw;
+  height: 100vh;
+  overflow: auto;
+}
+
+.simple-editor-content {
+  max-width: 648px;
+  width: 100%;
+  margin: 0 auto;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.simple-editor-content .tiptap.ProseMirror.simple-editor {
+  flex: 1;
+  padding: 3rem 3rem 30vh;
+}
+
+@media screen and (max-width: 480px) {
+  .simple-editor-content .tiptap.ProseMirror.simple-editor {
+    padding: 1rem 1.5rem 30vh;
+  }
+}

package/src/components/tiptap-ui/color-highlight-button/color-highlight-button.css

@@ -0,0 +1,42 @@
+.tiptap-button-highlight {
+  position: relative;
+  width: 1.25rem;
+  height: 1.25rem;
+  margin: 0 -0.175rem;
+  border-radius: var(--tt-radius-xl);
+  background-color: var(--highlight-color);
+  transition: transform 0.2s ease;
+}
+
+.tiptap-button-highlight::after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  border-radius: inherit;
+  box-sizing: border-box;
+  border: 1px solid var(--highlight-color);
+  filter: brightness(95%);
+  mix-blend-mode: multiply;
+}
+
+/* Dark mode: highlight::after */
+.dark .tiptap-button-highlight::after {
+  filter: brightness(140%);
+  mix-blend-mode: lighten;
+}
+
+/* --------------------------------------------
+   Active State Styles
+-------------------------------------------- */
+
+.tiptap-button[data-active-state="on"] .tiptap-button-highlight::after {
+  filter: brightness(80%);
+}
+
+/* Dark mode + active state */
+.dark .tiptap-button[data-active-state="on"] .tiptap-button-highlight::after {
+  filter: brightness(180%);
+}

package/src/components/tiptap-ui-primitive/badge/badge-colors.css

@@ -0,0 +1,215 @@
+.tiptap-badge {
+  --tt-badge-border-color: var(--tt-gray-light-a-200);
+  --tt-badge-border-color-subdued: var(--tt-gray-light-a-200);
+  --tt-badge-border-color-emphasized: var(--tt-gray-light-a-600);
+  --tt-badge-text-color: var(--tt-gray-light-a-500);
+  --tt-badge-text-color-subdued: var(--tt-gray-light-a-400);
+  --tt-badge-text-color-emphasized: var(--tt-gray-light-a-600);
+  --tt-badge-bg-color: var(--white);
+  --tt-badge-bg-color-subdued: var(--white);
+  --tt-badge-bg-color-emphasized: var(--white);
+  --tt-badge-icon-color: var(--tt-gray-light-a-500);
+  --tt-badge-icon-color-subdued: var(--tt-gray-light-a-400);
+  --tt-badge-icon-color-emphasized: var(--tt-brand-color-600);
+}
+
+.dark .tiptap-badge {
+  --tt-badge-border-color: var(--tt-gray-dark-a-200);
+  --tt-badge-border-color-subdued: var(--tt-gray-dark-a-200);
+  --tt-badge-border-color-emphasized: var(--tt-gray-dark-a-500);
+  --tt-badge-text-color: var(--tt-gray-dark-a-500);
+  --tt-badge-text-color-subdued: var(--tt-gray-dark-a-400);
+  --tt-badge-text-color-emphasized: var(--tt-gray-dark-a-600);
+  --tt-badge-bg-color: var(--black);
+  --tt-badge-bg-color-subdued: var(--black);
+  --tt-badge-bg-color-emphasized: var(--black);
+  --tt-badge-icon-color: var(--tt-gray-dark-a-500);
+  --tt-badge-icon-color-subdued: var(--tt-gray-dark-a-400);
+  --tt-badge-icon-color-emphasized: var(--tt-brand-color-400);
+}
+
+/* Ghost */
+.tiptap-badge[data-style="ghost"] {
+  --tt-badge-border-color: var(--tt-gray-light-a-200);
+  --tt-badge-border-color-subdued: var(--tt-gray-light-a-200);
+  --tt-badge-border-color-emphasized: var(--tt-gray-light-a-600);
+  --tt-badge-text-color: var(--tt-gray-light-a-500);
+  --tt-badge-text-color-subdued: var(--tt-gray-light-a-400);
+  --tt-badge-text-color-emphasized: var(--tt-gray-light-a-600);
+  --tt-badge-bg-color: var(--transparent);
+  --tt-badge-bg-color-subdued: var(--transparent);
+  --tt-badge-bg-color-emphasized: var(--transparent);
+  --tt-badge-icon-color: var(--tt-gray-light-a-500);
+  --tt-badge-icon-color-subdued: var(--tt-gray-light-a-400);
+  --tt-badge-icon-color-emphasized: var(--tt-brand-color-600);
+}
+
+.dark .tiptap-badge[data-style="ghost"] {
+  --tt-badge-border-color: var(--tt-gray-dark-a-200);
+  --tt-badge-border-color-subdued: var(--tt-gray-dark-a-200);
+  --tt-badge-border-color-emphasized: var(--tt-gray-dark-a-500);
+  --tt-badge-text-color: var(--tt-gray-dark-a-500);
+  --tt-badge-text-color-subdued: var(--tt-gray-dark-a-400);
+  --tt-badge-text-color-emphasized: var(--tt-gray-dark-a-600);
+  --tt-badge-bg-color: var(--transparent);
+  --tt-badge-bg-color-subdued: var(--transparent);
+  --tt-badge-bg-color-emphasized: var(--transparent);
+  --tt-badge-icon-color: var(--tt-gray-dark-a-500);
+  --tt-badge-icon-color-subdued: var(--tt-gray-dark-a-400);
+  --tt-badge-icon-color-emphasized: var(--tt-brand-color-400);
+}
+
+/* Gray */
+.tiptap-badge[data-style="gray"] {
+  --tt-badge-border-color: var(--tt-gray-light-a-200);
+  --tt-badge-border-color-subdued: var(--tt-gray-light-a-200);
+  --tt-badge-border-color-emphasized: var(--tt-gray-light-a-500);
+  --tt-badge-text-color: var(--tt-gray-light-a-500);
+  --tt-badge-text-color-subdued: var(--tt-gray-light-a-400);
+  --tt-badge-text-color-emphasized: var(--white);
+  --tt-badge-bg-color: var(--tt-gray-light-a-100);
+  --tt-badge-bg-color-subdued: var(--tt-gray-light-a-50);
+  --tt-badge-bg-color-emphasized: var(--tt-gray-light-a-700);
+  --tt-badge-icon-color: var(--tt-gray-light-a-500);
+  --tt-badge-icon-color-subdued: var(--tt-gray-light-a-400);
+  --tt-badge-icon-color-emphasized: var(--white);
+}
+
+.dark .tiptap-badge[data-style="gray"] {
+  --tt-badge-border-color: var(--tt-gray-dark-a-200);
+  --tt-badge-border-color-subdued: var(--tt-gray-dark-a-200);
+  --tt-badge-border-color-emphasized: var(--tt-gray-dark-a-500);
+  --tt-badge-text-color: var(--tt-gray-dark-a-500);
+  --tt-badge-text-color-subdued: var(--tt-gray-dark-a-400);
+  --tt-badge-text-color-emphasized: var(--black);
+  --tt-badge-bg-color: var(--tt-gray-dark-a-100);
+  --tt-badge-bg-color-subdued: var(--tt-gray-dark-a-50);
+  --tt-badge-bg-color-emphasized: var(--tt-gray-dark-a-800);
+  --tt-badge-icon-color: var(--tt-gray-dark-a-500);
+  --tt-badge-icon-color-subdued: var(--tt-gray-dark-a-400);
+  --tt-badge-icon-color-emphasized: var(--black);
+}
+
+/* Green */
+.tiptap-badge[data-style="green"] {
+  --tt-badge-border-color: var(--tt-color-green-inc-2);
+  --tt-badge-border-color-subdued: var(--tt-color-green-inc-3);
+  --tt-badge-border-color-emphasized: var(--tt-color-green-dec-2);
+  --tt-badge-text-color: var(--tt-color-green-dec-3);
+  --tt-badge-text-color-subdued: var(--tt-color-green-dec-2);
+  --tt-badge-text-color-emphasized: var(--tt-color-green-inc-5);
+  --tt-badge-bg-color: var(--tt-color-green-inc-4);
+  --tt-badge-bg-color-subdued: var(--tt-color-green-inc-5);
+  --tt-badge-bg-color-emphasized: var(--tt-color-green-dec-1);
+  --tt-badge-icon-color: var(--tt-color-green-dec-3);
+  --tt-badge-icon-color-subdued: var(--tt-color-green-dec-2);
+  --tt-badge-icon-color-emphasized: var(--tt-color-green-inc-5);
+}
+
+.dark .tiptap-badge[data-style="green"] {
+  --tt-badge-border-color: var(--tt-color-green-dec-2);
+  --tt-badge-border-color-subdued: var(--tt-color-green-dec-3);
+  --tt-badge-border-color-emphasized: var(--tt-color-green-base);
+  --tt-badge-text-color: var(--tt-color-green-inc-3);
+  --tt-badge-text-color-subdued: var(--tt-color-green-inc-2);
+  --tt-badge-text-color-emphasized: var(--tt-color-green-dec-5);
+  --tt-badge-bg-color: var(--tt-color-green-dec-4);
+  --tt-badge-bg-color-subdued: var(--tt-color-green-dec-5);
+  --tt-badge-bg-color-emphasized: var(--tt-color-green-inc-1);
+  --tt-badge-icon-color: var(--tt-color-green-inc-3);
+  --tt-badge-icon-color-subdued: var(--tt-color-green-inc-2);
+  --tt-badge-icon-color-emphasized: var(--tt-color-green-dec-5);
+}
+
+/* Yellow */
+.tiptap-badge[data-style="yellow"] {
+  --tt-badge-border-color: var(--tt-color-yellow-inc-2);
+  --tt-badge-border-color-subdued: var(--tt-color-yellow-inc-3);
+  --tt-badge-border-color-emphasized: var(--tt-color-yellow-dec-1);
+  --tt-badge-text-color: var(--tt-color-yellow-dec-3);
+  --tt-badge-text-color-subdued: var(--tt-color-yellow-dec-2);
+  --tt-badge-text-color-emphasized: var(--tt-color-yellow-dec-3);
+  --tt-badge-bg-color: var(--tt-color-yellow-inc-4);
+  --tt-badge-bg-color-subdued: var(--tt-color-yellow-inc-5);
+  --tt-badge-bg-color-emphasized: var(--tt-color-yellow-base);
+  --tt-badge-icon-color: var(--tt-color-yellow-dec-3);
+  --tt-badge-icon-color-subdued: var(--tt-color-yellow-dec-2);
+  --tt-badge-icon-color-emphasized: var(--tt-color-yellow-dec-3);
+}
+
+.dark .tiptap-badge[data-style="yellow"] {
+  --tt-badge-border-color: var(--tt-color-yellow-dec-2);
+  --tt-badge-border-color-subdued: var(--tt-color-yellow-dec-3);
+  --tt-badge-border-color-emphasized: var(--tt-color-yellow-inc-1);
+  --tt-badge-text-color: var(--tt-color-yellow-inc-3);
+  --tt-badge-text-color-subdued: var(--tt-color-yellow-inc-2);
+  --tt-badge-text-color-emphasized: var(--tt-color-yellow-dec-3);
+  --tt-badge-bg-color: var(--tt-color-yellow-dec-4);
+  --tt-badge-bg-color-subdued: var(--tt-color-yellow-dec-5);
+  --tt-badge-bg-color-emphasized: var(--tt-color-yellow-base);
+  --tt-badge-icon-color: var(--tt-color-yellow-inc-3);
+  --tt-badge-icon-color-subdued: var(--tt-color-yellow-inc-2);
+  --tt-badge-icon-color-emphasized: var(--tt-color-yellow-dec-3);
+}
+
+/* Red */
+.tiptap-badge[data-style="red"] {
+  --tt-badge-border-color: var(--tt-color-red-inc-2);
+  --tt-badge-border-color-subdued: var(--tt-color-red-inc-3);
+  --tt-badge-border-color-emphasized: var(--tt-color-red-dec-2);
+  --tt-badge-text-color: var(--tt-color-red-dec-3);
+  --tt-badge-text-color-subdued: var(--tt-color-red-dec-2);
+  --tt-badge-text-color-emphasized: var(--tt-color-red-inc-5);
+  --tt-badge-bg-color: var(--tt-color-red-inc-4);
+  --tt-badge-bg-color-subdued: var(--tt-color-red-inc-5);
+  --tt-badge-bg-color-emphasized: var(--tt-color-red-dec-1);
+  --tt-badge-icon-color: var(--tt-color-red-dec-3);
+  --tt-badge-icon-color-subdued: var(--tt-color-red-dec-2);
+  --tt-badge-icon-color-emphasized: var(--tt-color-red-inc-5);
+}
+
+.dark .tiptap-badge[data-style="red"] {
+  --tt-badge-border-color: var(--tt-color-red-dec-2);
+  --tt-badge-border-color-subdued: var(--tt-color-red-dec-3);
+  --tt-badge-border-color-emphasized: var(--tt-color-red-base);
+  --tt-badge-text-color: var(--tt-color-red-inc-3);
+  --tt-badge-text-color-subdued: var(--tt-color-red-inc-2);
+  --tt-badge-text-color-emphasized: var(--tt-color-red-dec-5);
+  --tt-badge-bg-color: var(--tt-color-red-dec-4);
+  --tt-badge-bg-color-subdued: var(--tt-color-red-dec-5);
+  --tt-badge-bg-color-emphasized: var(--tt-color-red-inc-1);
+  --tt-badge-icon-color: var(--tt-color-red-inc-3);
+  --tt-badge-icon-color-subdued: var(--tt-color-red-inc-2);
+  --tt-badge-icon-color-emphasized: var(--tt-color-red-dec-5);
+}
+
+/* Brand */
+.tiptap-badge[data-style="brand"] {
+  --tt-badge-border-color: var(--tt-brand-color-300);
+  --tt-badge-border-color-subdued: var(--tt-brand-color-200);
+  --tt-badge-border-color-emphasized: var(--tt-brand-color-600);
+  --tt-badge-text-color: var(--tt-brand-color-800);
+  --tt-badge-text-color-subdued: var(--tt-brand-color-700);
+  --tt-badge-text-color-emphasized: var(--tt-brand-color-50);
+  --tt-badge-bg-color: var(--tt-brand-color-100);
+  --tt-badge-bg-color-subdued: var(--tt-brand-color-50);
+  --tt-badge-bg-color-emphasized: var(--tt-brand-color-600);
+  --tt-badge-icon-color: var(--tt-brand-color-800);
+  --tt-badge-icon-color-subdued: var(--tt-brand-color-700);
+  --tt-badge-icon-color-emphasized: var(--tt-brand-color-100);
+}
+
+.dark .tiptap-badge[data-style="brand"] {
+  --tt-badge-border-color: var(--tt-brand-color-700);
+  --tt-badge-border-color-subdued: var(--tt-brand-color-800);
+  --tt-badge-border-color-emphasized: var(--tt-brand-color-400);
+  --tt-badge-text-color: var(--tt-brand-color-200);
+  --tt-badge-text-color-subdued: var(--tt-brand-color-300);
+  --tt-badge-text-color-emphasized: var(--tt-brand-color-950);
+  --tt-badge-bg-color: var(--tt-brand-color-900);
+  --tt-badge-bg-color-subdued: var(--tt-brand-color-950);
+  --tt-badge-bg-color-emphasized: var(--tt-brand-color-400);
+  --tt-badge-icon-color: var(--tt-brand-color-200);
+  --tt-badge-icon-color-subdued: var(--tt-brand-color-300);
+  --tt-badge-icon-color-emphasized: var(--tt-brand-color-900);
+}

package/src/components/tiptap-ui-primitive/badge/badge-group.css

@@ -0,0 +1,16 @@
+.tiptap-badge-group {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+}
+
+/* Vertical */
+.tiptap-badge-group[data-orientation="vertical"] {
+  flex-direction: column;
+}
+
+/* Horizontal */
+.tiptap-badge-group[data-orientation="horizontal"] {
+  flex-direction: row;
+}

package/src/components/tiptap-ui-primitive/badge/badge.css

@@ -0,0 +1,95 @@
+.tiptap-badge {
+  font-size: 0.625rem;
+  font-weight: 700;
+  font-feature-settings: "salt" on, "cv01" on;
+  line-height: 1.15;
+  height: 1.25rem;
+  min-width: 1.25rem;
+  padding: 0.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: solid 1px;
+  border-radius: var(--tt-radius-sm, 0.375rem);
+  transition-property: background, color, opacity;
+  transition-duration: var(--tt-transition-duration-default);
+  transition-timing-function: var(--tt-transition-easing-default);
+}
+
+/* button size large */
+.tiptap-badge[data-size="large"] {
+  font-size: 0.75rem;
+  height: 1.5rem;
+  min-width: 1.5rem;
+  padding: 0.375rem;
+  border-radius: var(--tt-radius-md, 0.375rem);
+}
+
+/* button size small */
+.tiptap-badge[data-size="small"] {
+  height: 1rem;
+  min-width: 1rem;
+  padding: 0.125rem;
+  border-radius: var(--tt-radius-xs, 0.25rem);
+}
+
+/* trim / expand text of the button */
+.tiptap-badge .tiptap-badge-text {
+  padding: 0 0.125rem;
+  flex-grow: 1;
+  text-align: left;
+}
+
+.tiptap-badge[data-text-trim="on"] .tiptap-badge-text {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+/* standard icon */
+.tiptap-badge .tiptap-badge-icon {
+  pointer-events: none;
+  flex-shrink: 0;
+  width: 0.625rem;
+  height: 0.625rem;
+}
+
+.tiptap-badge[data-size="large"] .tiptap-badge-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+/* --------------------------------------------
+----------- BADGE COLOR SETTINGS -------------
+-------------------------------------------- */
+
+.tiptap-badge {
+  background-color: var(--tt-badge-bg-color);
+  border-color: var(--tt-badge-border-color);
+  color: var(--tt-badge-text-color);
+}
+
+.tiptap-badge .tiptap-badge-icon {
+  color: var(--tt-badge-icon-color);
+}
+
+/* Emphasized */
+.tiptap-badge[data-appearance="emphasized"] {
+  background-color: var(--tt-badge-bg-color-emphasized);
+  border-color: var(--tt-badge-border-color-emphasized);
+  color: var(--tt-badge-text-color-emphasized);
+}
+
+.tiptap-badge[data-appearance="emphasized"] .tiptap-badge-icon {
+  color: var(--tt-badge-icon-color-emphasized);
+}
+
+/* Subdued */
+.tiptap-badge[data-appearance="subdued"] {
+  background-color: var(--tt-badge-bg-color-subdued);
+  border-color: var(--tt-badge-border-color-subdued);
+  color: var(--tt-badge-text-color-subdued);
+}
+
+.tiptap-badge[data-appearance="subdued"] .tiptap-badge-icon {
+  color: var(--tt-badge-icon-color-subdued);
+}