@semiont/react-ui 0.2.30 → 0.2.31

package/src/styles/motivations/motivation-highlight.css

@@ -0,0 +1,195 @@
+/**
+ * Motivation: Highlighting
+ * Color Theme: Yellow
+ * W3C Web Annotation: highlighting motivation
+ *
+ * This file defines all styles for highlight annotations
+ * across text, panels, and image annotations.
+ */
+
+/* ============================================
+   Color Variables
+   ============================================ */
+:root {
+  /* Light theme colors */
+  --semiont-motivation-highlight-primary: var(--semiont-color-yellow-500);
+  --semiont-motivation-highlight-bg: var(--semiont-color-yellow-200);
+  --semiont-motivation-highlight-bg-hover: var(--semiont-color-yellow-300);
+  --semiont-motivation-highlight-border: rgba(251, 191, 36, 0.3);
+  --semiont-motivation-highlight-border-hover: rgba(251, 191, 36, 0.5);
+  --semiont-motivation-highlight-text: var(--semiont-color-gray-900);
+
+  /* Dark theme colors */
+  --semiont-motivation-highlight-dark-bg: rgba(113, 63, 18, 0.5);
+  --semiont-motivation-highlight-dark-bg-hover: rgba(113, 63, 18, 0.6);
+  --semiont-motivation-highlight-dark-text: var(--semiont-color-white);
+  --semiont-motivation-highlight-dark-outline: rgba(251, 191, 36, 0.6);
+  --semiont-motivation-highlight-dark-primary: var(--semiont-color-yellow-300);
+
+  /* Panel backgrounds */
+  --semiont-motivation-highlight-panel-bg: rgba(254, 249, 195, 0.3);
+  --semiont-motivation-highlight-panel-bg-dark: rgba(113, 63, 18, 0.2);
+
+  /* Button colors */
+  --semiont-motivation-highlight-button-bg: var(--semiont-color-warning);
+  --semiont-motivation-highlight-button-bg-hover: var(--semiont-color-warning-dark);
+}
+
+/* ============================================
+   Inline Text Annotations
+   ============================================ */
+.semiont-motivation-highlight,
+.annotation-highlight {
+  border-radius: 0.25rem;
+  padding: 0 0.125rem;
+  cursor: pointer;
+  transition: all 200ms;
+  background: var(--semiont-motivation-highlight-bg);
+  color: var(--semiont-motivation-highlight-text);
+}
+
+.semiont-motivation-highlight:hover,
+.annotation-highlight:hover {
+  background: var(--semiont-motivation-highlight-bg-hover);
+}
+
+[data-theme="dark"] .semiont-motivation-highlight,
+[data-theme="dark"] .annotation-highlight {
+  background: var(--semiont-motivation-highlight-dark-bg);
+  color: var(--semiont-motivation-highlight-dark-text);
+  outline: 2px dashed var(--semiont-motivation-highlight-dark-outline);
+  outline-offset: 1px;
+}
+
+[data-theme="dark"] .semiont-motivation-highlight:hover,
+[data-theme="dark"] .annotation-highlight:hover {
+  background: var(--semiont-motivation-highlight-dark-bg-hover);
+}
+
+/* ============================================
+   Panel Entry Styling
+   ============================================ */
+.semiont-motivation-highlight-entry,
+.semiont-annotation-entry[data-type="highlight"] {
+  border-color: var(--semiont-motivation-highlight-border);
+}
+
+.semiont-motivation-highlight-entry:hover,
+.semiont-annotation-entry[data-type="highlight"]:hover {
+  background: var(--semiont-motivation-highlight-panel-bg);
+  border-color: var(--semiont-motivation-highlight-border-hover);
+}
+
+[data-theme="dark"] .semiont-motivation-highlight-entry,
+[data-theme="dark"] .semiont-annotation-entry[data-type="highlight"] {
+  border-color: var(--semiont-motivation-highlight-border);
+}
+
+[data-theme="dark"] .semiont-motivation-highlight-entry:hover,
+[data-theme="dark"] .semiont-annotation-entry[data-type="highlight"]:hover {
+  background: var(--semiont-motivation-highlight-panel-bg-dark);
+}
+
+/* ============================================
+   Quote/Excerpt Styling in Panels
+   ============================================ */
+.semiont-motivation-highlight-quote,
+.semiont-annotation-entry__quote[data-type="highlight"] {
+  background: var(--semiont-motivation-highlight-bg);
+  color: var(--semiont-motivation-highlight-text);
+  padding: 0.375rem 0.5rem;
+  border-radius: var(--semiont-radius-sm);
+}
+
+[data-theme="dark"] .semiont-motivation-highlight-quote,
+[data-theme="dark"] .semiont-annotation-entry__quote[data-type="highlight"] {
+  background: var(--semiont-motivation-highlight-dark-bg);
+  color: var(--semiont-motivation-highlight-dark-primary);
+}
+
+/* ============================================
+   Detection Section in Unified Panel
+   ============================================ */
+.semiont-motivation-highlight-section,
+.semiont-detect-section[data-type="highlight"] {
+  border-color: var(--semiont-motivation-highlight-button-bg);
+}
+
+[data-theme="dark"] .semiont-motivation-highlight-section,
+[data-theme="dark"] .semiont-detect-section[data-type="highlight"] {
+  border-color: var(--semiont-motivation-highlight-button-bg-hover);
+}
+
+/* ============================================
+   Button Styling
+   ============================================ */
+.semiont-motivation-highlight-button,
+.semiont-button[data-variant="detect"][data-type="highlight"] {
+  background: linear-gradient(to right, var(--semiont-motivation-highlight-button-bg), var(--semiont-motivation-highlight-button-bg-hover));
+  color: var(--semiont-color-white) !important;
+  border: 1px solid var(--semiont-motivation-highlight-border);
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.semiont-motivation-highlight-button:hover,
+.semiont-button[data-variant="detect"][data-type="highlight"]:hover {
+  background: var(--semiont-motivation-highlight-button-bg-hover);
+  border-color: var(--semiont-motivation-highlight-primary);
+}
+
+[data-theme="dark"] .semiont-motivation-highlight-button,
+[data-theme="dark"] .semiont-button[data-variant="detect"][data-type="highlight"] {
+  border-color: var(--semiont-motivation-highlight-dark-outline);
+}
+
+[data-theme="dark"] .semiont-motivation-highlight-button:hover,
+[data-theme="dark"] .semiont-button[data-variant="detect"][data-type="highlight"]:hover {
+  border-color: var(--semiont-motivation-highlight-dark-primary);
+}
+
+.semiont-motivation-highlight-button:focus-visible,
+.semiont-button[data-variant="detect"][data-type="highlight"]:focus-visible {
+  outline: 2px solid var(--semiont-motivation-highlight-primary);
+  outline-offset: 2px;
+}
+
+[data-theme="dark"] .semiont-motivation-highlight-button:focus-visible,
+[data-theme="dark"] .semiont-button[data-variant="detect"][data-type="highlight"]:focus-visible {
+  outline: 2px solid var(--semiont-motivation-highlight-dark-primary);
+  outline-offset: 2px;
+}
+
+/* ============================================
+   Image Annotation Overlays
+   ============================================ */
+.semiont-image-annotation-highlight {
+  stroke: var(--semiont-motivation-highlight-primary);
+  stroke-width: 2px;
+  fill: var(--semiont-motivation-highlight-border);
+}
+
+.semiont-image-annotation-highlight:hover {
+  stroke-width: 3px;
+  fill: var(--semiont-motivation-highlight-border-hover);
+}
+
+[data-theme="dark"] .semiont-image-annotation-highlight {
+  stroke: var(--semiont-motivation-highlight-dark-primary);
+  fill: rgba(251, 191, 36, 0.2);
+}
+
+/* ============================================
+   Highlight-specific Visual Elements
+   ============================================ */
+.semiont-highlight-marker {
+  background: var(--semiont-motivation-highlight-bg);
+  display: inline-block;
+  padding: 0 0.125rem;
+  border-radius: 0.125rem;
+}
+
+[data-theme="dark"] .semiont-highlight-marker {
+  background: var(--semiont-motivation-highlight-dark-bg);
+  outline: 1px dashed var(--semiont-motivation-highlight-dark-outline);
+}

package/src/styles/motivations/motivation-reference.css

@@ -0,0 +1,210 @@
+/**
+ * Motivation: Linking/References
+ * Color Theme: Blue/Cyan gradient
+ * W3C Web Annotation: linking motivation
+ *
+ * This file defines all styles for reference/linking annotations
+ * across text, panels, and image annotations.
+ */
+
+/* ============================================
+   Color Variables
+   ============================================ */
+:root {
+  /* Light theme colors */
+  --semiont-motivation-reference-primary: var(--semiont-color-cyan-600);
+  --semiont-motivation-reference-secondary: var(--semiont-color-blue-600);
+  --semiont-motivation-reference-bg: linear-gradient(to right, var(--semiont-color-cyan-200, #a5f3fc), var(--semiont-color-blue-200));
+  --semiont-motivation-reference-bg-hover: linear-gradient(to right, var(--semiont-color-cyan-300, #67e8f9), var(--semiont-color-blue-300));
+  --semiont-motivation-reference-border: rgba(6, 182, 212, 0.3);
+  --semiont-motivation-reference-border-hover: rgba(6, 182, 212, 0.5);
+  --semiont-motivation-reference-text: var(--semiont-color-gray-900);
+
+  /* Dark theme colors */
+  --semiont-motivation-reference-dark-bg: linear-gradient(to right, rgba(30, 58, 138, 0.5), rgba(8, 51, 68, 0.5));
+  --semiont-motivation-reference-dark-bg-hover: linear-gradient(to right, rgba(30, 58, 138, 0.6), rgba(8, 51, 68, 0.6));
+  --semiont-motivation-reference-dark-text: var(--semiont-color-white);
+  --semiont-motivation-reference-dark-outline: rgba(6, 182, 212, 0.6);
+  --semiont-motivation-reference-dark-primary: var(--semiont-color-cyan-400);
+
+  /* Button gradients */
+  --semiont-motivation-reference-button-bg: linear-gradient(to right, var(--semiont-color-cyan-600), var(--semiont-color-blue-500));
+  --semiont-motivation-reference-button-bg-hover: linear-gradient(to right, var(--semiont-color-cyan-500), var(--semiont-color-blue-500));
+}
+
+/* ============================================
+   Inline Text Annotations
+   ============================================ */
+.semiont-motivation-reference,
+.annotation-reference {
+  border-radius: 0.25rem;
+  padding: 0 0.125rem;
+  cursor: pointer;
+  transition: all 200ms;
+  background: var(--semiont-motivation-reference-bg);
+  color: var(--semiont-motivation-reference-text);
+}
+
+.semiont-motivation-reference:hover,
+.annotation-reference:hover {
+  background: var(--semiont-motivation-reference-bg-hover);
+}
+
+[data-theme="dark"] .semiont-motivation-reference,
+[data-theme="dark"] .annotation-reference {
+  background: var(--semiont-motivation-reference-dark-bg);
+  color: var(--semiont-motivation-reference-dark-text);
+  outline: 2px dashed var(--semiont-motivation-reference-dark-outline);
+  outline-offset: 1px;
+}
+
+[data-theme="dark"] .semiont-motivation-reference:hover,
+[data-theme="dark"] .annotation-reference:hover {
+  background: var(--semiont-motivation-reference-dark-bg-hover);
+}
+
+/* ============================================
+   Panel Entry Styling
+   ============================================ */
+.semiont-motivation-reference-entry,
+.semiont-annotation-entry[data-type="reference"] {
+  border-color: var(--semiont-motivation-reference-border);
+}
+
+.semiont-motivation-reference-entry:hover,
+.semiont-annotation-entry[data-type="reference"]:hover {
+  background: linear-gradient(to right, rgba(165, 243, 252, 0.1), rgba(191, 219, 254, 0.1));
+  border-color: var(--semiont-motivation-reference-border-hover);
+}
+
+[data-theme="dark"] .semiont-motivation-reference-entry,
+[data-theme="dark"] .semiont-annotation-entry[data-type="reference"] {
+  border-color: var(--semiont-motivation-reference-border);
+}
+
+[data-theme="dark"] .semiont-motivation-reference-entry:hover,
+[data-theme="dark"] .semiont-annotation-entry[data-type="reference"]:hover {
+  background: linear-gradient(to right, rgba(30, 58, 138, 0.2), rgba(8, 51, 68, 0.2));
+}
+
+/* ============================================
+   Quote/Excerpt Styling in Panels
+   ============================================ */
+.semiont-motivation-reference-quote,
+.semiont-annotation-entry__quote[data-type="reference"] {
+  background: linear-gradient(to right, rgba(165, 243, 252, 0.2), rgba(191, 219, 254, 0.2));
+  color: var(--semiont-color-cyan-700);
+}
+
+[data-theme="dark"] .semiont-motivation-reference-quote,
+[data-theme="dark"] .semiont-annotation-entry__quote[data-type="reference"] {
+  background: linear-gradient(to right, rgba(30, 58, 138, 0.3), rgba(8, 51, 68, 0.3));
+  color: var(--semiont-color-cyan-300);
+}
+
+/* ============================================
+   Detection Section in Unified Panel
+   ============================================ */
+.semiont-motivation-reference-section,
+.semiont-detect-section[data-type="reference"] {
+  border-color: var(--semiont-color-cyan-500);
+}
+
+[data-theme="dark"] .semiont-motivation-reference-section,
+[data-theme="dark"] .semiont-detect-section[data-type="reference"] {
+  border-color: var(--semiont-color-cyan-600);
+}
+
+/* ============================================
+   Button Styling
+   ============================================ */
+.semiont-motivation-reference-button,
+.semiont-button[data-variant="detect"][data-type="reference"] {
+  background: linear-gradient(to right, var(--semiont-color-cyan-600), var(--semiont-color-blue-500)) !important;
+  color: var(--semiont-color-white) !important;
+  border: 1px solid var(--semiont-motivation-reference-border);
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.semiont-motivation-reference-button:hover,
+.semiont-button[data-variant="detect"][data-type="reference"]:hover {
+  background: var(--semiont-motivation-reference-button-bg-hover);
+  border-color: var(--semiont-motivation-reference-primary);
+}
+
+[data-theme="dark"] .semiont-motivation-reference-button,
+[data-theme="dark"] .semiont-button[data-variant="detect"][data-type="reference"] {
+  border-color: var(--semiont-motivation-reference-dark-outline);
+}
+
+[data-theme="dark"] .semiont-motivation-reference-button:hover,
+[data-theme="dark"] .semiont-button[data-variant="detect"][data-type="reference"]:hover {
+  border-color: var(--semiont-motivation-reference-dark-primary);
+}
+
+.semiont-motivation-reference-button:focus-visible,
+.semiont-button[data-variant="detect"][data-type="reference"]:focus-visible {
+  outline: 2px solid var(--semiont-motivation-reference-primary);
+  outline-offset: 2px;
+}
+
+[data-theme="dark"] .semiont-motivation-reference-button:focus-visible,
+[data-theme="dark"] .semiont-button[data-variant="detect"][data-type="reference"]:focus-visible {
+  outline: 2px solid var(--semiont-motivation-reference-dark-primary);
+  outline-offset: 2px;
+}
+
+/* ============================================
+   Reference-specific Elements
+   ============================================ */
+.semiont-reference-icon {
+  font-size: 1.25rem;
+  flex-shrink: 0;
+  color: var(--semiont-motivation-reference-primary);
+}
+
+[data-theme="dark"] .semiont-reference-icon {
+  color: var(--semiont-motivation-reference-dark-primary);
+}
+
+.semiont-reference-link {
+  font-size: var(--semiont-text-sm);
+  color: var(--semiont-motivation-reference-primary);
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  margin-top: 0.25rem;
+}
+
+[data-theme="dark"] .semiont-reference-link {
+  color: var(--semiont-motivation-reference-dark-primary);
+}
+
+.semiont-reference-link:focus-visible {
+  outline: 2px solid var(--semiont-motivation-reference-primary);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+[data-theme="dark"] .semiont-reference-link:focus-visible {
+  outline-color: var(--semiont-motivation-reference-dark-primary);
+}
+
+/* ============================================
+   Image Annotation Overlays
+   ============================================ */
+.semiont-image-annotation-reference {
+  stroke: var(--semiont-motivation-reference-primary);
+  fill: var(--semiont-motivation-reference-border);
+}
+
+.semiont-image-annotation-reference:hover {
+  stroke-width: 3px;
+  fill: var(--semiont-motivation-reference-border-hover);
+}
+
+[data-theme="dark"] .semiont-image-annotation-reference {
+  stroke: var(--semiont-motivation-reference-dark-primary);
+  fill: rgba(6, 182, 212, 0.2);
+}

package/src/styles/motivations/motivation-tag.css

@@ -0,0 +1,254 @@
+/**
+ * Motivation: Tagging
+ * Color Theme: Orange/Amber gradient
+ * W3C Web Annotation: tagging motivation
+ *
+ * This file defines all styles for tag annotations
+ * across text, panels, and image annotations.
+ */
+
+/* ============================================
+   Color Variables
+   ============================================ */
+:root {
+  /* Light theme colors */
+  --semiont-motivation-tag-primary: var(--semiont-color-orange-600);
+  --semiont-motivation-tag-secondary: var(--semiont-color-amber-600);
+  --semiont-motivation-tag-bg: linear-gradient(to right, var(--semiont-color-orange-200), var(--semiont-color-amber-200));
+  --semiont-motivation-tag-bg-hover: linear-gradient(to right, var(--semiont-color-orange-300), var(--semiont-color-amber-300));
+  --semiont-motivation-tag-border: rgba(251, 146, 60, 0.3);
+  --semiont-motivation-tag-border-hover: rgba(251, 146, 60, 0.5);
+  --semiont-motivation-tag-text: var(--semiont-color-orange-700);
+
+  /* Dark theme colors */
+  --semiont-motivation-tag-dark-bg: linear-gradient(to right, rgba(124, 45, 18, 0.5), rgba(120, 53, 15, 0.5));
+  --semiont-motivation-tag-dark-bg-hover: linear-gradient(to right, rgba(124, 45, 18, 0.6), rgba(120, 53, 15, 0.6));
+  --semiont-motivation-tag-dark-text: var(--semiont-color-orange-300);
+  --semiont-motivation-tag-dark-outline: rgba(251, 146, 60, 0.6);
+  --semiont-motivation-tag-dark-primary: var(--semiont-color-orange-400);
+
+  /* Panel backgrounds */
+  --semiont-motivation-tag-panel-bg: linear-gradient(to right, rgba(254, 237, 213, 0.2), rgba(254, 243, 199, 0.2));
+  --semiont-motivation-tag-panel-bg-dark: linear-gradient(to right, rgba(124, 45, 18, 0.2), rgba(120, 53, 15, 0.2));
+
+  /* Quote backgrounds */
+  --semiont-motivation-tag-quote-bg: linear-gradient(to right, rgba(254, 237, 213, 0.4), rgba(254, 243, 199, 0.4));
+  --semiont-motivation-tag-quote-bg-dark: linear-gradient(to right, rgba(124, 45, 18, 0.5), rgba(120, 53, 15, 0.5));
+
+  /* Button backgrounds */
+  --semiont-motivation-tag-button-bg: linear-gradient(to right, var(--semiont-color-orange-500), var(--semiont-color-amber-500));
+  --semiont-motivation-tag-button-bg-hover: linear-gradient(to right, var(--semiont-color-orange-600), var(--semiont-color-amber-600));
+}
+
+/* ============================================
+   Inline Text Annotations
+   ============================================ */
+.semiont-motivation-tag,
+.annotation-tag {
+  border-radius: 0.25rem;
+  padding: 0 0.125rem;
+  cursor: pointer;
+  transition: all 200ms;
+  background: var(--semiont-motivation-tag-bg);
+  color: var(--semiont-motivation-tag-text);
+}
+
+.semiont-motivation-tag:hover,
+.annotation-tag:hover {
+  background: var(--semiont-motivation-tag-bg-hover);
+}
+
+[data-theme="dark"] .semiont-motivation-tag,
+[data-theme="dark"] .annotation-tag {
+  background: var(--semiont-motivation-tag-dark-bg);
+  color: var(--semiont-color-white) !important;
+  outline: 2px dashed var(--semiont-motivation-tag-dark-outline);
+  outline-offset: 1px;
+}
+
+[data-theme="dark"] .semiont-motivation-tag:hover,
+[data-theme="dark"] .annotation-tag:hover {
+  background: var(--semiont-motivation-tag-dark-bg-hover);
+}
+
+/* ============================================
+   Panel Entry Styling
+   ============================================ */
+.semiont-motivation-tag-entry,
+.semiont-annotation-entry[data-type="tag"] {
+  border-color: var(--semiont-motivation-tag-border);
+}
+
+.semiont-motivation-tag-entry:hover,
+.semiont-annotation-entry[data-type="tag"]:hover {
+  background: var(--semiont-motivation-tag-panel-bg);
+  border-color: var(--semiont-motivation-tag-border-hover);
+}
+
+[data-theme="dark"] .semiont-motivation-tag-entry,
+[data-theme="dark"] .semiont-annotation-entry[data-type="tag"] {
+  border-color: var(--semiont-motivation-tag-border);
+}
+
+[data-theme="dark"] .semiont-motivation-tag-entry:hover,
+[data-theme="dark"] .semiont-annotation-entry[data-type="tag"]:hover {
+  background: var(--semiont-motivation-tag-panel-bg-dark);
+}
+
+/* ============================================
+   Quote/Excerpt Styling in Panels
+   ============================================ */
+.semiont-motivation-tag-quote,
+.semiont-annotation-entry__quote[data-type="tag"] {
+  background: var(--semiont-motivation-tag-quote-bg);
+  color: var(--semiont-motivation-tag-text);
+  padding: 0.375rem 0.5rem;
+  border-radius: var(--semiont-radius-sm);
+}
+
+[data-theme="dark"] .semiont-motivation-tag-quote,
+[data-theme="dark"] .semiont-annotation-entry__quote[data-type="tag"] {
+  background: var(--semiont-motivation-tag-quote-bg-dark);
+  color: var(--semiont-motivation-tag-dark-text);
+}
+
+/* ============================================
+   Detection Section in Unified Panel
+   ============================================ */
+.semiont-motivation-tag-section,
+.semiont-detect-section[data-type="tag"] {
+  border-color: var(--semiont-motivation-tag-primary);
+}
+
+[data-theme="dark"] .semiont-motivation-tag-section,
+[data-theme="dark"] .semiont-detect-section[data-type="tag"] {
+  border-color: var(--semiont-motivation-tag-dark-primary);
+}
+
+/* ============================================
+   Button Styling
+   ============================================ */
+.semiont-motivation-tag-button,
+.semiont-button[data-variant="detect"][data-type="tag"] {
+  background: linear-gradient(to right, var(--semiont-color-orange-500), var(--semiont-color-amber-500)) !important;
+  color: var(--semiont-color-white) !important;
+  border: 1px solid var(--semiont-motivation-tag-border);
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.semiont-motivation-tag-button:hover,
+.semiont-button[data-variant="detect"][data-type="tag"]:hover:not(:disabled) {
+  background: var(--semiont-motivation-tag-button-bg-hover);
+  border-color: var(--semiont-motivation-tag-primary);
+}
+
+[data-theme="dark"] .semiont-motivation-tag-button,
+[data-theme="dark"] .semiont-button[data-variant="detect"][data-type="tag"] {
+  border-color: var(--semiont-motivation-tag-dark-outline);
+}
+
+[data-theme="dark"] .semiont-motivation-tag-button:hover,
+[data-theme="dark"] .semiont-button[data-variant="detect"][data-type="tag"]:hover:not(:disabled) {
+  border-color: var(--semiont-motivation-tag-dark-primary);
+}
+
+.semiont-motivation-tag-button:focus-visible,
+.semiont-button[data-variant="detect"][data-type="tag"]:focus-visible {
+  outline: 2px solid var(--semiont-motivation-tag-primary);
+  outline-offset: 2px;
+}
+
+[data-theme="dark"] .semiont-motivation-tag-button:focus-visible,
+[data-theme="dark"] .semiont-button[data-variant="detect"][data-type="tag"]:focus-visible {
+  outline: 2px solid var(--semiont-motivation-tag-dark-primary);
+  outline-offset: 2px;
+}
+
+/* ============================================
+   Tag Input Areas
+   ============================================ */
+.semiont-annotation-prompt[data-type="tag"] {
+  background: var(--semiont-motivation-tag-panel-bg);
+  padding: var(--semiont-panel-padding);
+  border-radius: var(--semiont-radius-md);
+  border: 2px solid var(--semiont-motivation-tag-border);
+}
+
+[data-theme="dark"] .semiont-annotation-prompt[data-type="tag"] {
+  background: var(--semiont-motivation-tag-panel-bg-dark);
+  border-color: var(--semiont-motivation-tag-dark-primary);
+}
+
+/* ============================================
+   Individual Tag Chips
+   ============================================ */
+/* Tag chip when related to tag motivation */
+.semiont-motivation-tag-chip {
+  background: var(--semiont-motivation-tag-primary);
+  color: var(--semiont-color-white) !important;
+  border-radius: var(--semiont-radius-full);
+  padding: 0.125rem 0.5rem;
+  font-size: var(--semiont-text-xs);
+  font-weight: var(--semiont-font-medium);
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+[data-theme="dark"] .semiont-motivation-tag-chip {
+  background: var(--semiont-motivation-tag-dark-primary);
+}
+
+.semiont-motivation-tag-chip:hover {
+  background: var(--semiont-motivation-tag-secondary);
+}
+
+[data-theme="dark"] .semiont-motivation-tag-chip:hover {
+  background: var(--semiont-color-orange-500);
+}
+
+/* ============================================
+   Image Annotation Overlays
+   ============================================ */
+.semiont-image-annotation-tag {
+  stroke: var(--semiont-motivation-tag-primary);
+  stroke-width: 2px;
+  fill: var(--semiont-motivation-tag-border);
+}
+
+.semiont-image-annotation-tag:hover {
+  stroke-width: 3px;
+  fill: var(--semiont-motivation-tag-border-hover);
+}
+
+[data-theme="dark"] .semiont-image-annotation-tag {
+  stroke: var(--semiont-motivation-tag-dark-primary);
+  fill: rgba(251, 146, 60, 0.2);
+}
+
+/* ============================================
+   Tag-specific Visual Elements
+   ============================================ */
+.semiont-tag-icon {
+  color: var(--semiont-motivation-tag-primary);
+  font-size: 1.125rem;
+}
+
+[data-theme="dark"] .semiont-tag-icon {
+  color: var(--semiont-motivation-tag-dark-primary);
+}
+
+.semiont-tag-badge {
+  background: var(--semiont-motivation-tag-primary);
+  color: var(--semiont-color-white) !important;
+  border-radius: var(--semiont-radius-sm);
+  padding: 0.125rem 0.375rem;
+  font-size: var(--semiont-text-xs);
+  font-weight: var(--semiont-font-semibold);
+  display: inline-block;
+}
+
+[data-theme="dark"] .semiont-tag-badge {
+  background: var(--semiont-motivation-tag-dark-primary);
+}