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

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

@@ -1,238 +0,0 @@
-.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

@@ -1,93 +0,0 @@
-@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

@@ -1,42 +0,0 @@
-.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

@@ -1,215 +0,0 @@
-.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

@@ -1,16 +0,0 @@
-.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

@@ -1,95 +0,0 @@
-.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);
-}