@amulet-laboratories/hex 0.3.0 → 0.5.1

package/src/shared/components/temporal.css

@@ -1,6 +1,6 @@
-/* Hex — Shared Temporal Components
- * Styles for Rig's temporal package: TimelineScrubber, AnimatedChart,
- * PlaybackControls, TemporalHeatmap, ParticleField
+/* Hex — Shared Temporal Components (skin only)
+ * Colors, fills, strokes, backgrounds, shadows, opacity, color-only transitions, font-family.
+ * Structural layout lives in Rig/src/styles/temporal.css.
  */
 
 /* ───────── TimelineScrubber ───────── */
@@ -10,38 +10,25 @@
 }
 
 [data-rig-timeline-scrubber][data-disabled] {
-  @apply opacity-40 pointer-events-none;
+  @apply opacity-40;
 }
 
 [data-rig-timeline-scrubber-track] {
   @apply bg-foreground/10;
-  border-radius: 2px;
-  cursor: pointer;
 }
 
 [data-rig-timeline-scrubber-fill] {
   background: var(--domain-accent, var(--color-primary));
-  border-radius: 2px;
-  transition: width 0.1s ease;
 }
 
 [data-rig-timeline-scrubber-thumb] {
   background: var(--domain-accent, var(--color-primary));
-  border: 2px solid var(--color-foreground);
-  border-radius: 50%;
+  border-color: var(--color-foreground);
   box-shadow: 0 1px 3px rgb(0 0 0 / 0.3);
-  transition:
-    left 0.1s ease,
-    transform 0.15s ease;
-}
-
-[data-rig-timeline-scrubber-thumb]:hover,
-[data-rig-timeline-scrubber][data-dragging] [data-rig-timeline-scrubber-thumb] {
-  transform: scale(1.2);
 }
 
 [data-rig-timeline-scrubber-value] {
-  @apply text-xs text-muted-foreground font-mono;
+  @apply text-muted-foreground font-mono;
 }
 
 /* ───────── PlaybackControls ───────── */
@@ -50,31 +37,28 @@
   @apply text-foreground;
 }
 
-[data-rig-playback-controls-buttons] {
-  @apply inline-flex items-center;
-  gap: 0.25rem;
-}
-
 [data-rig-playback-controls-skip-back],
 [data-rig-playback-controls-play],
 [data-rig-playback-controls-skip-forward] {
-  @apply bg-transparent border-none text-foreground
-         hover:text-primary transition-colors;
-  padding: 0.25rem;
-  cursor: pointer;
+  @apply bg-transparent text-foreground transition-colors;
+}
+
+[data-rig-playback-controls-skip-back]:hover,
+[data-rig-playback-controls-play]:hover,
+[data-rig-playback-controls-skip-forward]:hover {
+  @apply text-primary;
 }
 
 [data-rig-playback-controls-speed] {
-  @apply text-xs text-muted-foreground font-mono
-         bg-transparent border-none hover:text-primary transition-colors;
-  padding: 0.25rem;
-  cursor: pointer;
+  @apply text-muted-foreground font-mono bg-transparent transition-colors;
+}
+
+[data-rig-playback-controls-speed]:hover {
+  @apply text-primary;
 }
 
 [data-rig-playback-controls-track] {
   @apply bg-foreground/10;
-  border-radius: 2px;
-  cursor: pointer;
   transition: background 0.15s ease;
 }
 
@@ -84,21 +68,19 @@
 
 [data-rig-playback-controls-progress] {
   background: var(--domain-accent, var(--color-primary));
-  border-radius: 2px;
-  transition: width 0.1s ease;
 }
 
 [data-rig-playback-controls-time] {
-  @apply text-xs text-muted-foreground font-mono;
+  @apply text-muted-foreground font-mono;
 }
 
 [data-rig-playback-controls-current],
 [data-rig-playback-controls-duration] {
-  @apply text-xs font-mono;
+  @apply font-mono;
 }
 
 [data-rig-playback-controls-separator] {
-  @apply text-xs text-muted-foreground font-mono;
+  @apply text-muted-foreground font-mono;
   opacity: 0.5;
 }
 
@@ -108,10 +90,6 @@
   @apply text-foreground;
 }
 
-[data-rig-animated-chart-canvas] {
-  display: block;
-}
-
 [data-rig-animated-chart-bar] {
   fill: var(--domain-accent, var(--color-primary));
   transition:
@@ -126,29 +104,23 @@
 [data-rig-animated-chart-line] {
   stroke: var(--domain-accent, var(--color-primary));
   fill: none;
-  stroke-width: 2;
-  stroke-linecap: round;
-  stroke-linejoin: round;
   transition: d 0.3s ease;
 }
 
-[data-rig-animated-chart-controls] {
-  @apply flex items-center gap-2;
+[data-rig-animated-chart-play] {
+  @apply bg-transparent text-foreground transition-colors;
 }
 
-[data-rig-animated-chart-play] {
-  @apply bg-transparent border-none text-foreground
-         hover:text-primary transition-colors;
-  padding: 0.25rem;
-  cursor: pointer;
+[data-rig-animated-chart-play]:hover {
+  @apply text-primary;
 }
 
 [data-rig-animated-chart-label] {
-  @apply text-xs text-muted-foreground font-mono;
+  @apply text-muted-foreground font-mono;
 }
 
 [data-rig-animated-chart-counter] {
-  @apply text-xs text-muted-foreground font-mono;
+  @apply text-muted-foreground font-mono;
 }
 
 /* ───────── TemporalHeatmap ───────── */
@@ -160,32 +132,20 @@
 [data-rig-temporal-heatmap-time-labels] text,
 [data-rig-temporal-heatmap-category-labels] text {
   fill: var(--color-muted-foreground);
-  @apply font-mono text-xs;
-}
-
-[data-rig-temporal-heatmap-cells] {
-  /* group wrapper — no visual styles needed */
+  @apply font-mono;
 }
 
 [data-rig-temporal-heatmap-cell] {
   stroke: var(--color-background);
-  stroke-width: 1;
-  rx: 2;
   transition: opacity 0.15s ease;
 }
 
 [data-rig-temporal-heatmap-cell]:hover {
   opacity: 0.85;
-  cursor: pointer;
 }
 
 /* ───────── ParticleField ───────── */
 
 [data-rig-particle-field] {
   @apply bg-background;
-  overflow: hidden;
-}
-
-[data-rig-particle-field-canvas] {
-  display: block;
 }