datalog-theme 0.6.0

data/_sass/_interactive.scss

@@ -0,0 +1,344 @@
+@use 'sass:map';
+
+@use 'variables' as *;
+@use 'mixins' as *;
+
+.interactive-block {
+  border-radius: 1rem;
+  border: 1px solid rgba($color-accent-primary, 0.2);
+  background: rgba($color-accent-primary, 0.06);
+  padding: map.get($spacing, 5);
+  display: grid;
+  gap: map.get($spacing, 4);
+}
+
+body.dark-mode .interactive-block {
+  border-color: rgba($dark-accent-primary, 0.4);
+  background: rgba($dark-accent-primary, 0.18);
+}
+
+.interactive-header {
+  display: flex;
+  flex-wrap: wrap;
+  gap: map.get($spacing, 3);
+  align-items: baseline;
+  justify-content: space-between;
+}
+
+.interactive-header__title {
+  font-weight: 600;
+}
+
+.interactive-toolbar {
+  display: inline-flex;
+  gap: map.get($spacing, 2);
+  flex-wrap: wrap;
+}
+
+.interactive-toolbar button,
+.interactive-toolbar a {
+  border-radius: 0.5rem;
+  border: 1px solid rgba($color-ink-900, 0.2);
+  background: white;
+  padding: map.get($spacing, 2) map.get($spacing, 3);
+  font-size: map.get($font-size-scale, xs);
+  text-decoration: none;
+  color: inherit;
+  transition: background $transition-base, border-color $transition-base;
+
+  &:hover,
+  &:focus {
+    border-color: $color-accent-primary;
+    background: rgba($color-accent-primary, 0.12);
+  }
+}
+
+body.dark-mode .interactive-toolbar button,
+body.dark-mode .interactive-toolbar a {
+  border-color: rgba($dark-ink-500, 0.35);
+  background: rgba($dark-surface-300, 0.65);
+
+  &:hover,
+  &:focus {
+    border-color: $dark-accent-primary;
+    background: rgba($dark-accent-primary, 0.25);
+  }
+}
+
+.interactive-note {
+  font-size: map.get($font-size-scale, sm);
+  color: $color-ink-500;
+}
+
+body.dark-mode .interactive-note {
+  color: rgba($dark-ink-500, 0.85);
+}
+
+.viz-tabs {
+  display: flex;
+  gap: map.get($spacing, 2);
+  flex-wrap: wrap;
+}
+
+.viz-tab {
+  border-radius: 999px;
+  padding: map.get($spacing, 2) map.get($spacing, 4);
+  border: 1px solid rgba($color-ink-900, 0.15);
+  background: rgba($color-ink-900, 0.04);
+  font-size: map.get($font-size-scale, xs);
+  text-decoration: none;
+  color: $color-ink-700;
+
+  &.is-active {
+    border-color: $color-accent-primary;
+    background: rgba($color-accent-primary, 0.15);
+    color: $color-accent-primary;
+  }
+}
+
+body.dark-mode .viz-tab {
+  border-color: rgba($dark-ink-500, 0.3);
+  background: rgba($dark-surface-300, 0.6);
+  color: $dark-ink-700;
+
+  &.is-active {
+    border-color: $dark-accent-primary;
+    background: rgba($dark-accent-primary, 0.3);
+    color: $dark-accent-primary;
+  }
+}
+
+.viz-block {
+  border-radius: 1rem;
+  border: 1px solid rgba($color-ink-900, 0.12);
+  background: $color-surface-100;
+  padding: map.get($spacing, 4);
+  display: grid;
+  gap: map.get($spacing, 3);
+  position: relative;
+  overflow: hidden;
+}
+
+body.dark-mode .viz-block {
+  border-color: rgba($dark-ink-500, 0.4);
+  background: rgba($dark-surface-200, 0.6);
+}
+
+.viz-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: map.get($spacing, 2);
+  justify-content: space-between;
+}
+
+.viz-title {
+  font-weight: 600;
+  margin: 0;
+}
+
+.viz-meta {
+  font-size: map.get($font-size-scale, xs);
+  color: $color-ink-500;
+}
+
+body.dark-mode .viz-meta {
+  color: rgba($dark-ink-500, 0.85);
+}
+
+.viz-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: map.get($spacing, 2);
+  align-items: center;
+}
+
+.viz-toolbar__button,
+.viz-toolbar a {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  border: 1px solid rgba($color-ink-900, 0.18);
+  background: rgba($color-ink-900, 0.04);
+  padding: map.get($spacing, 2) map.get($spacing, 4);
+  font-size: map.get($font-size-scale, xs);
+  color: inherit;
+  text-decoration: none;
+  transition: background $transition-base, border-color $transition-base, color $transition-base;
+
+  &:hover,
+  &:focus {
+    border-color: $color-accent-primary;
+    background: rgba($color-accent-primary, 0.12);
+    color: $color-accent-primary;
+  }
+}
+
+body.dark-mode .viz-toolbar__button,
+body.dark-mode .viz-toolbar a {
+  border-color: rgba($dark-ink-500, 0.35);
+  background: rgba($dark-surface-300, 0.55);
+
+  &:hover,
+  &:focus {
+    border-color: $dark-accent-primary;
+    background: rgba($dark-accent-primary, 0.25);
+    color: $dark-accent-primary;
+  }
+}
+
+.viz-status {
+  font-size: map.get($font-size-scale, xs);
+  color: $color-ink-500;
+}
+
+.viz-status[data-tone='error'] {
+  color: $color-danger-600;
+}
+
+body.dark-mode .viz-status {
+  color: rgba($dark-ink-500, 0.85);
+}
+
+body.dark-mode .viz-status[data-tone='error'] {
+  color: $dark-danger-400;
+}
+
+.viz-canvas {
+  position: relative;
+  width: 100%;
+  min-height: 280px;
+}
+
+.viz-embed,
+.viz-canvas iframe,
+.viz-canvas canvas {
+  width: 100%;
+  height: 100%;
+  border: 0;
+  border-radius: 0.75rem;
+  background: white;
+}
+
+body.dark-mode .viz-canvas iframe,
+body.dark-mode .viz-canvas canvas {
+  background: rgba($dark-surface-200, 0.85);
+}
+
+.viz-gallery-controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: map.get($spacing, 3);
+  align-items: center;
+  margin-bottom: map.get($spacing, 4);
+}
+
+.viz-gallery-controls label {
+  font-weight: 600;
+  font-size: map.get($font-size-scale, sm);
+}
+
+.viz-gallery-controls select {
+  border-radius: 0.75rem;
+  border: 1px solid rgba($color-ink-900, 0.2);
+  padding: map.get($spacing, 2) map.get($spacing, 3);
+  background: white;
+}
+
+body.dark-mode .viz-gallery-controls select {
+  border-color: rgba($dark-ink-500, 0.4);
+  background: rgba($dark-surface-300, 0.7);
+  color: inherit;
+}
+
+.viz-gallery-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: map.get($spacing, 4);
+}
+
+.viz-card {
+  border-radius: 1rem;
+  border: 1px solid rgba($color-ink-900, 0.12);
+  background: $color-surface-100;
+  padding: map.get($spacing, 4);
+  display: grid;
+  gap: map.get($spacing, 3);
+}
+
+body.dark-mode .viz-card {
+  border-color: rgba($dark-ink-500, 0.35);
+  background: rgba($dark-surface-200, 0.65);
+}
+
+.viz-card__title {
+  font-size: map.get($font-size-scale, lg);
+  margin: 0;
+}
+
+.viz-card__summary {
+  font-size: map.get($font-size-scale, sm);
+  color: $color-ink-600;
+}
+
+body.dark-mode .viz-card__summary {
+  color: rgba($dark-ink-500, 0.85);
+}
+
+.viz-card__meta {
+  display: grid;
+  gap: map.get($spacing, 2);
+  margin: 0;
+}
+
+.viz-card__meta dt {
+  font-size: map.get($font-size-scale, xs);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: $color-ink-500;
+}
+
+.viz-card__meta dd {
+  margin: 0;
+  font-weight: 600;
+}
+
+body.dark-mode .viz-card__meta dt {
+  color: rgba($dark-ink-500, 0.7);
+}
+
+.viz-card__tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: map.get($spacing, 2);
+}
+
+.viz-card__tag {
+  border-radius: 999px;
+  background: rgba($color-accent-primary, 0.12);
+  color: $color-accent-primary;
+  padding: map.get($spacing, 1) map.get($spacing, 3);
+  font-size: map.get($font-size-scale, xs);
+}
+
+body.dark-mode .viz-card__tag {
+  background: rgba($dark-accent-primary, 0.3);
+  color: $dark-accent-primary;
+}
+
+@media (max-width: 42rem) {
+  .viz-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: map.get($spacing, 1);
+  }
+
+  .viz-toolbar {
+    width: 100%;
+  }
+
+  .viz-canvas {
+    min-height: 220px;
+  }
+}