@amulet-laboratories/hex 0.3.0 → 0.5.0

package/src/shared/components/prose.css

@@ -1,55 +1,25 @@
-/* Hex — Prose
- * Markdown / rich-text content rendering styles.
- * Apply [data-rig-prose] to any container with rendered HTML content.
+/* Hex — Prose & feedback layers (skin only)
+ * Colors, backgrounds, text decoration, opacity, font-family.
+ * Structural layout lives in Rig/src/styles/prose.css.
  */
 
+/* ───────── Prose ───────── */
+
 [data-rig-prose] {
   color: var(--color-foreground);
-  line-height: 1.75;
 }
 
 [data-rig-prose] h2 {
-  font-size: var(--text-lg, 1.125rem);
-  font-weight: var(--weight-bold, 700);
   color: var(--color-foreground);
-  border-bottom: 1px solid var(--color-border);
-  padding-bottom: 0.5rem;
-  margin-top: 2.5rem;
-  margin-bottom: 1rem;
-}
-
-[data-rig-prose] h2:first-child {
-  margin-top: 0;
+  border-bottom-color: var(--color-border);
 }
 
 [data-rig-prose] h3 {
-  font-size: 1rem;
-  font-weight: var(--weight-semibold, 600);
   color: var(--color-foreground);
-  margin-top: 1.75rem;
-  margin-bottom: 0.75rem;
 }
 
 [data-rig-prose] h4 {
-  font-size: var(--text-base, 0.875rem);
-  font-weight: var(--weight-semibold, 600);
   color: var(--color-foreground);
-  margin-top: 1.5rem;
-  margin-bottom: 0.5rem;
-}
-
-[data-rig-prose] p {
-  margin-bottom: 1rem;
-}
-
-[data-rig-prose] ul,
-[data-rig-prose] ol {
-  padding-left: 1.5rem;
-  margin-bottom: 1rem;
-}
-
-[data-rig-prose] li {
-  margin-bottom: 0.25rem;
 }
 
 [data-rig-prose] li::marker {
@@ -59,59 +29,30 @@
 [data-rig-prose] code:not(pre code) {
   background: var(--color-muted);
   color: var(--color-foreground);
-  padding: 0.125rem 0.375rem;
-  border-radius: 0.25rem;
-  font-size: var(--text-sm, 0.8125rem);
 }
 
 [data-rig-prose] pre {
   background: var(--color-muted);
-  border: 1px solid var(--color-border);
-  border-radius: 0.5rem;
-  padding: 1rem;
-  overflow-x: auto;
-  margin-bottom: 1rem;
-  font-size: var(--text-sm, 0.8125rem);
-  line-height: 1.6;
+  border-color: var(--color-border);
 }
 
 [data-rig-prose] blockquote {
-  border-left: 3px solid var(--color-muted-foreground);
-  padding-left: 1rem;
-  margin-left: 0;
-  margin-bottom: 1rem;
+  border-left-color: var(--color-muted-foreground);
   color: var(--color-muted-foreground);
-  font-style: italic;
-}
-
-[data-rig-prose] table {
-  width: 100%;
-  font-size: var(--text-sm, 0.8125rem);
-  border-collapse: collapse;
-  margin-bottom: 1rem;
 }
 
 [data-rig-prose] th {
-  text-align: left;
-  font-weight: var(--weight-semibold, 600);
   color: var(--color-foreground);
-  border-bottom: 2px solid var(--color-border);
-  padding: 0.5rem 0.75rem;
+  border-bottom-color: var(--color-border);
 }
 
 [data-rig-prose] td {
-  padding: 0.5rem 0.75rem;
-  border-bottom: 1px solid var(--color-border);
-}
-
-[data-rig-prose] tr:last-child td {
-  border-bottom: none;
+  border-bottom-color: var(--color-border);
 }
 
 [data-rig-prose] a {
   color: var(--color-primary);
   text-decoration: underline;
-  text-underline-offset: 2px;
 }
 
 [data-rig-prose] a:hover {
@@ -119,94 +60,36 @@
 }
 
 [data-rig-prose] hr {
-  border: none;
-  border-top: 1px solid var(--color-border);
-  margin: 2rem 0;
+  border-top-color: var(--color-border);
 }
 
 [data-rig-prose] strong {
-  font-weight: var(--weight-semibold, 600);
   color: var(--color-foreground);
 }
 
-[data-rig-prose] img {
-  max-width: 100%;
-  border-radius: 0.5rem;
-}
-
 /* ───────── ConfirmDialog ───────── */
 
 [data-rig-confirm-dialog] {
-  padding: 1.5rem;
-  width: 100%;
-  max-width: 28rem;
-  margin: 0 auto;
   background: var(--color-card);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius, 4px);
+  border-color: var(--color-border);
 }
 
 [data-rig-confirm-dialog-title] {
-  font-size: var(--text-sm, 0.8125rem);
-  font-weight: var(--weight-semibold, 600);
   color: var(--color-foreground);
-  margin-bottom: 0.75rem;
 }
 
 [data-rig-confirm-dialog-message] {
-  font-size: var(--text-sm, 0.8125rem);
   color: var(--color-muted-foreground);
-  line-height: 1.625;
-  margin-bottom: 1.5rem;
-}
-
-[data-rig-confirm-dialog-actions] {
-  display: flex;
-  justify-content: flex-end;
-  gap: 0.5rem;
-}
-
-/* ───────── LiveRegion ───────── */
-
-[data-rig-live-region] {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
 }
 
 /* ───────── ErrorBoundary ───────── */
 
-[data-rig-error-boundary] {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  padding: 1rem;
-  text-align: center;
-}
-
 [data-rig-error-boundary-message] {
-  font-size: var(--text-xs, 0.75rem);
   color: var(--color-muted-foreground);
 }
 
-[data-rig-error-boundary-details] {
-  text-align: left;
-  width: 100%;
-  max-width: 24rem;
-}
-
 [data-rig-error-boundary-details] > summary {
-  font-size: var(--text-xs, 0.75rem);
   color: var(--color-muted-foreground);
-  cursor: pointer;
 }
 
 [data-rig-error-boundary-details] > summary:hover {
@@ -214,68 +97,31 @@
 }
 
 [data-rig-error-boundary-details] > pre {
-  font-size: var(--text-xs, 0.75rem);
   color: var(--color-muted-foreground);
-  margin-top: 0.25rem;
-  padding: 0.5rem;
   background: var(--color-accent);
-  border-radius: var(--radius, 4px);
-  overflow: auto;
-  max-height: 8rem;
 }
 
 /* ───────── CrashScreen ───────── */
 
 [data-rig-crash-screen] {
-  position: fixed;
-  inset: 0;
-  z-index: 9999;
-  display: flex;
-  align-items: center;
-  justify-content: center;
   background: var(--color-background, #0f0d0a);
 }
 
-[data-rig-crash-screen-content] {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.75rem;
-  max-width: 28rem;
-  padding: 2rem;
-  text-align: center;
-}
-
 [data-rig-crash-screen-icon] {
-  font-size: 2.5rem;
-  line-height: 1;
   color: var(--color-destructive, #e54d2e);
   opacity: 0.8;
 }
 
 [data-rig-crash-screen-title] {
-  font-size: var(--text-lg, 1.125rem);
-  font-weight: var(--weight-semibold, 600);
   color: var(--color-foreground);
-  margin: 0;
 }
 
 [data-rig-crash-screen-message] {
-  font-size: var(--text-sm, 0.8125rem);
   color: var(--color-muted-foreground);
-  margin: 0;
-  line-height: 1.5;
-}
-
-[data-rig-crash-screen-details] {
-  text-align: left;
-  width: 100%;
 }
 
 [data-rig-crash-screen-details] > summary {
-  font-size: var(--text-xs, 0.75rem);
   color: var(--color-muted-foreground);
-  cursor: pointer;
 }
 
 [data-rig-crash-screen-details] > summary:hover {
@@ -283,20 +129,6 @@
 }
 
 [data-rig-crash-screen-details] > pre {
-  font-size: var(--text-xs, 0.75rem);
   color: var(--color-muted-foreground);
-  margin-top: 0.25rem;
-  padding: 0.75rem;
   background: var(--color-accent);
-  border-radius: var(--radius, 4px);
-  overflow: auto;
-  max-height: 10rem;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-[data-rig-crash-screen-actions] {
-  display: flex;
-  gap: 0.5rem;
-  margin-top: 0.5rem;
 }