datalog-theme 0.6.0

data/_sass/_syntax-highlighting.scss

@@ -0,0 +1,128 @@
+@use 'sass:map';
+
+@use 'variables' as *;
+
+// Prism.js inspired syntax highlighting tuned for analytical workloads
+pre[class*='language-'],
+code[class*='language-'] {
+  color: $color-ink-900;
+  background: transparent;
+  font-family: $font-family-mono;
+  font-size: map.get($font-size-scale, sm);
+  line-height: 1.6;
+}
+
+pre[class*='language-'] {
+  position: relative;
+  padding-top: map.get($spacing, 5);
+}
+
+:not(pre) > code[class*='language-'],
+pre[class*='language-'] {
+  background: rgba($color-surface-900, 0.02);
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: $color-ink-300;
+  font-style: italic;
+}
+
+.token.punctuation {
+  color: $color-ink-500;
+}
+
+.token.property,
+.token.tag,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: $color-accent-tertiary;
+}
+
+.token.boolean,
+.token.number {
+  color: $color-accent-secondary;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: $color-success;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.token.variable {
+  color: $color-accent-primary;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: $color-accent-secondary;
+}
+
+.token.function,
+.token.class-name {
+  color: $color-accent-primary;
+  font-weight: 600;
+}
+
+.token.regex,
+.token.important {
+  color: $color-warning;
+}
+
+.token.important,
+.token.bold {
+  font-weight: 700;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+body.dark-mode pre[class*='language-'],
+body.dark-mode code[class*='language-'] {
+  color: $dark-ink-900;
+}
+
+body.dark-mode pre[class*='language-'] {
+  background: rgba($dark-surface-300, 0.8);
+}
+
+body.dark-mode .token.comment,
+body.dark-mode .token.prolog,
+body.dark-mode .token.doctype,
+body.dark-mode .token.cdata {
+  color: rgba($dark-ink-500, 0.7);
+}
+
+body.dark-mode .token.boolean,
+body.dark-mode .token.number {
+  color: $dark-accent-secondary;
+}
+
+body.dark-mode .token.selector,
+body.dark-mode .token.attr-name,
+body.dark-mode .token.string,
+body.dark-mode .token.inserted {
+  color: #5fe3aa;
+}
+
+body.dark-mode .token.keyword,
+body.dark-mode .token.operator {
+  color: $dark-accent-primary;
+}
+
+body.dark-mode .token.function,
+body.dark-mode .token.class-name {
+  color: #9fb6ff;
+}

data/_sass/_theme.scss

@@ -0,0 +1,79 @@
+// Primary manifest for the DataLog theme.
+// Provides CSS custom properties and composes the Sass partials.
+@use "sass:color";
+// 1) Modules FIRST (no CSS before these)
+@use 'variables' as *;            // gives access to Sass tokens here
+@use 'mixins' as *;
+
+// Each partial below MUST import its own tokens if it references them.
+// `@use` here does NOT leak variables into those files' scopes.
+@use 'base';
+@use 'typography';
+@use 'layout';
+@use 'header';
+@use 'components';
+@use 'utilities';
+@use 'syntax-highlighting';
+@use 'mathematical';
+@use 'interactive';
+@use 'search';
+@use 'visualizations';
+@use 'phase1-enhancements';
+@use 'phase3-enhancements';
+@use 'phase4-enhancements';
+@use 'phase5-enhancements';
+@use 'package-docs';
+
+// 2) CSS rules AFTER all @use/@forward
+:root {
+  // Surface/background colors
+  --color-surface: #{$color-surface-50};
+  --color-surface-alt: #{$color-surface-100};
+  --color-background: #{$color-surface-50};
+  --color-background-secondary: #{$color-surface-100};
+
+  // Text/ink colors
+  --color-ink: #{$color-ink-900};
+  --color-ink-muted: #{$color-ink-500};
+  --color-text-primary: #{$color-ink-900};
+  --color-text-secondary: #{$color-ink-500};
+  --color-text-tertiary: #{$color-ink-300};
+
+  // Accent colors
+  --color-accent: #{$color-accent-primary};
+  --color-accent-secondary: #{$color-accent-secondary};
+  --color-accent-dark: #{color.adjust($color-accent-primary, $lightness: -10%)};
+
+  // Border colors
+  --color-border: #{$color-neutral-200};
+
+  // Typography
+  --max-width-reading: #{$max-width-reading};
+  --font-sans: #{$font-family-sans};
+  --font-serif: #{$font-family-serif};
+  --font-mono: #{$font-family-mono};
+  --base-font-size: #{$font-size-root};
+}
+
+body.dark-mode {
+  // Surface/background colors
+  --color-surface: #{$dark-surface-100};
+  --color-surface-alt: #{$dark-surface-200};
+  --color-background: #{$dark-surface-100};
+  --color-background-secondary: #{$dark-surface-200};
+
+  // Text/ink colors
+  --color-ink: #{$dark-ink-900};
+  --color-ink-muted: #{$dark-ink-500};
+  --color-text-primary: #{$dark-ink-900};
+  --color-text-secondary: #{$dark-ink-500};
+  --color-text-tertiary: #{$dark-ink-300};
+
+  // Accent colors
+  --color-accent: #{$dark-accent-primary};
+  --color-accent-secondary: #{$dark-accent-secondary};
+  --color-accent-dark: #{color.adjust($dark-accent-primary, $lightness: -10%)};
+
+  // Border colors
+  --color-border: #{$dark-surface-300};
+}

data/_sass/_typography.scss

@@ -0,0 +1,148 @@
+@use 'sass:map';
+
+@use 'variables' as *;
+@use 'mixins' as *;
+
+body {
+  font-size: map.get($font-size-scale, base);
+}
+
+p,
+li {
+  max-width: $max-width-reading;
+}
+
+p {
+  margin: 0 0 map.get($spacing, 4);
+}
+
+strong {
+  font-weight: 600;
+}
+
+em {
+  font-style: italic;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: $font-family-serif;
+  font-weight: 600;
+  color: $color-ink-900;
+  line-height: $line-height-tight;
+  margin: map.get($spacing, 6) 0 map.get($spacing, 3);
+}
+
+h1 {
+  @include fluid-type(2rem, 3rem);
+}
+
+h2 {
+  @include fluid-type(1.75rem, 2.5rem);
+}
+
+h3 {
+  font-size: 1.5rem;
+}
+
+h4 {
+  font-size: 1.25rem;
+}
+
+h5 {
+  font-size: 1.125rem;
+}
+
+h6 {
+  font-size: 1rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+body.dark-mode h1,
+body.dark-mode h2,
+body.dark-mode h3,
+body.dark-mode h4,
+body.dark-mode h5,
+body.dark-mode h6 {
+  color: $dark-ink-900;
+}
+
+blockquote {
+  @include callout($color-accent-tertiary);
+  font-style: italic;
+  margin: map.get($spacing, 5) 0;
+  max-width: $max-width-reading;
+}
+
+hr {
+  border: 0;
+  border-top: 1px solid $color-neutral-200;
+  margin: map.get($spacing, 6) 0;
+}
+
+figure {
+  margin: map.get($spacing, 5) 0;
+}
+
+figcaption {
+  font-size: map.get($font-size-scale, sm);
+  color: $color-ink-500;
+  margin-top: map.get($spacing, 2);
+}
+
+body.dark-mode figcaption {
+  color: rgba($dark-ink-500, 0.85);
+}
+
+dt {
+  font-weight: 600;
+}
+
+dd {
+  margin: 0 0 map.get($spacing, 3) map.get($spacing, 4);
+}
+
+.lead {
+  font-size: map.get($font-size-scale, lg);
+  color: $color-ink-700;
+  max-width: $max-width-reading;
+}
+
+body.dark-mode .lead {
+  color: rgba($dark-ink-900, 0.85);
+}
+
+code {
+  background-color: rgba($color-surface-900, 0.05);
+  color: $color-ink-700;
+  border-radius: 0.35rem;
+  padding: 0.1em 0.35em;
+}
+
+body.dark-mode code {
+  background-color: rgba($dark-surface-300, 0.6);
+  color: $dark-ink-700;
+}
+
+pre code {
+  background: transparent;
+  padding: 0;
+}
+
+.citation {
+  font-size: map.get($font-size-scale, sm);
+  color: $color-ink-500;
+  display: block;
+  margin-top: map.get($spacing, 2);
+}
+
+.caption-number {
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}

data/_sass/_utilities.scss

@@ -0,0 +1,334 @@
+@use 'sass:color';
+@use 'sass:map';
+
+@use 'variables' as *;
+@use 'mixins' as *;
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: map.get($spacing, 1);
+  border-radius: 999px;
+  padding: 0.2rem 0.65rem;
+  font-size: map.get($font-size-scale, xs);
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  background: rgba($color-accent-primary, 0.08);
+  color: $color-accent-primary;
+}
+
+.badge--success {
+  background: rgba($color-success, 0.1);
+  color: $color-success;
+}
+
+.badge--warning {
+  background: rgba($color-warning, 0.1);
+  color: $color-warning;
+}
+
+.badge--danger {
+  background: rgba($color-critical, 0.1);
+  color: $color-critical;
+}
+
+.stat-symbol {
+  font-variant-numeric: tabular-nums;
+  font-feature-settings: 'tnum' 1, 'ss01' 1;
+  font-family: $font-family-mono;
+}
+
+.legend {
+  display: inline-flex;
+  gap: map.get($spacing, 2);
+  flex-wrap: wrap;
+}
+
+.legend__item {
+  display: inline-flex;
+  align-items: center;
+  gap: map.get($spacing, 1);
+  font-size: map.get($font-size-scale, xs);
+}
+
+.legend__swatch {
+  width: 0.75rem;
+  height: 0.75rem;
+  border-radius: 999px;
+  background: $color-accent-primary;
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
+}
+
+body.dark-mode .legend__swatch {
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
+}
+
+.u-text-center {
+  text-align: center;
+}
+
+.u-text-right {
+  text-align: right;
+}
+
+.u-flow > * + * {
+  margin-top: map.get($spacing, 4);
+}
+
+.u-grid {
+  @include data-grid();
+}
+
+.u-grid--tight {
+  @include data-grid(14rem, map.get($spacing, 3));
+}
+
+.u-section {
+  padding: map.get($spacing, 6) 0;
+}
+
+.u-section--alt {
+  background: rgba($color-neutral-100, 0.6);
+}
+
+body.dark-mode .u-section--alt {
+  background: rgba($dark-surface-300, 0.6);
+}
+
+.u-shadow {
+  box-shadow: $shadow-soft;
+}
+
+body.dark-mode .u-shadow {
+  box-shadow: none;
+}
+
+html[dir='rtl'] body {
+  direction: rtl;
+  text-align: right;
+}
+
+html[dir='rtl'] .site-nav .nav-list,
+html[dir='rtl'] .header-controls {
+  flex-direction: row-reverse;
+}
+
+html[dir='rtl'] .site-brand {
+  flex-direction: row-reverse;
+}
+
+html[dir='rtl'] .site-brand .site-title-group,
+html[dir='rtl'] .nav-description,
+html[dir='rtl'] .site-search,
+body.rtl .article-body,
+body.rtl .site-footer,
+body.rtl .site-nav,
+body.rtl .header-utilities__content {
+  text-align: right;
+}
+
+html[dir='rtl'] .site-search input {
+  direction: rtl;
+}
+
+.analytics-dashboard {
+  display: flex;
+  flex-direction: column;
+  gap: map.get($spacing, 6);
+  margin-top: map.get($spacing, 4);
+}
+
+.analytics-header {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: map.get($spacing, 4);
+  align-items: flex-start;
+}
+
+.analytics-title {
+  margin: 0;
+  font-size: map.get($font-size-scale, xl);
+}
+
+.analytics-subtitle {
+  margin: map.get($spacing, 2) 0 0;
+  color: rgba($color-neutral-700, 0.85);
+}
+
+body.dark-mode .analytics-subtitle {
+  color: rgba($dark-surface-50, 0.85);
+}
+
+.analytics-meta {
+  display: flex;
+  flex-direction: column;
+  gap: map.get($spacing, 2);
+  font-size: map.get($font-size-scale, sm);
+  color: rgba($color-neutral-600, 0.9);
+}
+
+body.dark-mode .analytics-meta {
+  color: rgba($dark-surface-50, 0.75);
+}
+
+.analytics-grid {
+  display: grid;
+  gap: map.get($spacing, 4);
+  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
+}
+
+.analytics-card {
+  background: rgba($color-neutral-50, 0.6);
+  border-radius: map.get($radius, lg);
+  padding: map.get($spacing, 4);
+  box-shadow: $shadow-soft;
+  display: flex;
+  flex-direction: column;
+  gap: map.get($spacing, 3);
+}
+
+body.dark-mode .analytics-card {
+  background: rgba($dark-surface-200, 0.8);
+  box-shadow: none;
+}
+
+.analytics-card header h3 {
+  margin: 0;
+  font-size: map.get($font-size-scale, lg);
+}
+
+.analytics-card--wide {
+  grid-column: span 2;
+}
+
+@media (max-width: 56rem) {
+  .analytics-card--wide {
+    grid-column: span 1;
+  }
+}
+
+.analytics-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: map.get($font-size-scale, sm);
+}
+
+.analytics-table th,
+.analytics-table td {
+  padding: map.get($spacing, 2) map.get($spacing, 1);
+  border-bottom: 1px solid rgba($color-neutral-200, 0.7);
+  vertical-align: top;
+}
+
+body.dark-mode .analytics-table th,
+body.dark-mode .analytics-table td {
+  border-bottom: 1px solid rgba($dark-surface-100, 0.4);
+}
+
+.analytics-table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+.analytics-table td:nth-child(2),
+.analytics-table td:nth-child(3),
+.analytics-table th:nth-child(2),
+.analytics-table th:nth-child(3) {
+  text-align: right;
+}
+
+.analytics-metric-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: map.get($spacing, 2);
+  font-size: map.get($font-size-scale, sm);
+}
+
+.analytics-definition-list {
+  display: grid;
+  gap: map.get($spacing, 2);
+  font-size: map.get($font-size-scale, sm);
+}
+
+.analytics-definition-list dt {
+  font-weight: 600;
+}
+
+.analytics-alert {
+  padding: map.get($spacing, 3);
+  border-radius: map.get($radius, md);
+  background: rgba($color-warning, 0.12);
+  color: color.adjust($color-warning, $lightness: -20%);
+  font-size: map.get($font-size-scale, sm);
+}
+
+body.dark-mode .analytics-alert {
+  background: rgba($color-warning, 0.18);
+  color: color.adjust($color-warning, $lightness: 10%);
+}
+
+.analytics-dashboard [data-field],
+.analytics-dashboard td,
+.analytics-dashboard th,
+.analytics-dashboard li {
+  font-variant-numeric: tabular-nums;
+}
+
+.post-slides,
+.post-bibliography,
+.post-comments {
+  margin-top: map.get($spacing, 6);
+  padding-top: map.get($spacing, 4);
+  border-top: 1px solid rgba($color-border, 0.5);
+}
+
+.post-slides h2,
+.post-bibliography h2,
+.post-comments h2 {
+  font-size: map.get($font-size-scale, lg);
+  margin-bottom: map.get($spacing, 3);
+}
+
+.post-bibliography ol {
+  counter-reset: reference-counter;
+  margin: 0;
+  padding-left: map.get($spacing, 5);
+}
+
+.post-bibliography li {
+  margin-bottom: map.get($spacing, 2);
+}
+
+.post-comments-intro {
+  font-size: map.get($font-size-scale, sm);
+  color: rgba($color-foreground, 0.8);
+  margin-bottom: map.get($spacing, 3);
+}
+
+.datalog-comments {
+  border-radius: map.get($radius, md);
+  border: 1px solid rgba($color-border, 0.4);
+  padding: map.get($spacing, 3);
+  background: rgba($color-surface, 0.65);
+}
+
+body.dark-mode .datalog-comments {
+  background: rgba($color-surface-dark, 0.35);
+  border-color: rgba($color-border-dark, 0.6);
+}