@opendata-ai/openchart-core 7.11.0 → 8.0.0-rc.10

package/src/styles/graph.css

@@ -1,130 +1,135 @@
-/* ---------------------------------------------------------------------------
- * Graph
- * --------------------------------------------------------------------------- */
+@layer oc.components {
+  /* ---------------------------------------------------------------------------
+   * Graph
+   * --------------------------------------------------------------------------- */
 
-.oc-graph-wrapper {
-  position: relative;
-  overflow: hidden;
-  background: var(--oc-bg);
-  font-family: var(--oc-font-family);
-  width: 100%;
-  height: 100%;
-}
+  .oc-graph-wrapper {
+    position: relative;
+    overflow: hidden;
+    background: var(--oc-bg);
+    font-family: var(--oc-font-family);
+    width: 100%;
+    height: 100%;
+  }
 
-.oc-graph-canvas {
-  display: block;
-  width: 100%;
-  height: 100%;
-  cursor: grab;
-}
+  .oc-graph-canvas {
+    display: block;
+    width: 100%;
+    height: 100%;
+    cursor: grab;
+  }
 
-.oc-graph-canvas--dragging {
-  cursor: grabbing;
-}
+  .oc-graph-canvas--dragging {
+    cursor: grabbing;
+  }
 
-.oc-graph-chrome {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 2;
-  padding: 16px 16px 8px;
-  pointer-events: none;
+  .oc-graph-chrome {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 2;
+    padding: 16px 16px 8px;
+    pointer-events: none;
 
-  & .oc-title {
-    font-size: var(--oc-title-size);
-    font-weight: var(--oc-title-weight);
-    letter-spacing: var(--oc-title-tracking);
-    color: var(--oc-text);
-    margin: 0 0 4px;
-    --_stroke: color-mix(in srgb, var(--oc-bg) 80%, transparent);
-    text-shadow:
-      -2px -2px 0 var(--_stroke),
-      2px -2px 0 var(--_stroke),
-      -2px 2px 0 var(--_stroke),
-      2px 2px 0 var(--_stroke),
-      0 -2px 0 var(--_stroke),
-      0 2px 0 var(--_stroke),
-      -2px 0 0 var(--_stroke),
-      2px 0 0 var(--_stroke);
+    & .oc-title {
+      font-size: var(--oc-title-size);
+      font-weight: var(--oc-title-weight);
+      letter-spacing: var(--oc-title-tracking);
+      color: var(--oc-text);
+      margin: 0 0 4px;
+      --_stroke: color-mix(in srgb, var(--oc-bg) 80%, transparent);
+      text-shadow:
+        -2px -2px 0 var(--_stroke),
+        2px -2px 0 var(--_stroke),
+        -2px 2px 0 var(--_stroke),
+        2px 2px 0 var(--_stroke),
+        0 -2px 0 var(--_stroke),
+        0 2px 0 var(--_stroke),
+        -2px 0 0 var(--_stroke),
+        2px 0 0 var(--_stroke);
+    }
+
+    & .oc-subtitle {
+      font-size: var(--oc-subtitle-size);
+      color: var(--oc-text-secondary);
+      margin: 0;
+      --_stroke: color-mix(in srgb, var(--oc-bg) 80%, transparent);
+      text-shadow:
+        -1px -1px 0 var(--_stroke),
+        1px -1px 0 var(--_stroke),
+        -1px 1px 0 var(--_stroke),
+        1px 1px 0 var(--_stroke);
+    }
   }
 
-  & .oc-subtitle {
-    font-size: var(--oc-subtitle-size);
+  .oc-graph-legend {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    background: var(--oc-bg);
+    border: 1px solid var(--oc-border);
+    border-radius: var(--oc-border-radius);
+    padding: 8px 12px;
+    font-size: 12px;
     color: var(--oc-text-secondary);
-    margin: 0;
-    --_stroke: color-mix(in srgb, var(--oc-bg) 80%, transparent);
-    text-shadow:
-      -1px -1px 0 var(--_stroke),
-      1px -1px 0 var(--_stroke),
-      -1px 1px 0 var(--_stroke),
-      1px 1px 0 var(--_stroke);
+    max-height: 200px;
+    overflow-y: auto;
   }
-}
 
-.oc-graph-legend {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  background: var(--oc-bg);
-  border: 1px solid var(--oc-border);
-  border-radius: var(--oc-border-radius);
-  padding: 8px 12px;
-  font-size: 12px;
-  color: var(--oc-text-secondary);
-  max-height: 200px;
-  overflow-y: auto;
-}
+  .oc-graph-legend-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 2px 0;
+  }
 
-.oc-graph-legend-item {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 2px 0;
-}
+  .oc-graph-legend-swatch {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
 
-.oc-graph-legend-swatch {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
+  .oc-graph-search {
+    position: absolute;
+    top: 8px;
+    left: 8px;
 
-.oc-graph-search {
-  position: absolute;
-  top: 8px;
-  left: 8px;
+    & input {
+      font-family: var(--oc-font-family);
+      font-size: var(--oc-body-size);
+      padding: 6px 10px;
+      border: 1px solid var(--oc-border);
+      border-radius: var(--oc-border-radius);
+      background: var(--oc-bg);
+      color: var(--oc-text);
+      outline: none;
 
-  & input {
-    font-family: var(--oc-font-family);
-    font-size: var(--oc-body-size);
-    padding: 6px 10px;
-    border: 1px solid var(--oc-border);
-    border-radius: var(--oc-border-radius);
-    background: var(--oc-bg);
-    color: var(--oc-text);
-    outline: none;
-
-    &:focus {
-      border-color: var(--oc-focus);
-      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
+      &:focus {
+        border-color: var(--oc-focus);
+        box-shadow: 0 0 0 2px var(--oc-focus-ring-strong);
+      }
     }
   }
-}
-
-/* Dark mode graph overrides (darker bg for canvas-based rendering) */
-.oc-dark .oc-graph-wrapper,
-.oc-graph-wrapper.oc-dark {
-  --oc-bg: #0d1117;
-}
 
-.oc-dark .oc-graph-legend,
-.oc-dark.oc-graph-wrapper .oc-graph-legend {
-  background: rgba(13, 17, 23, 0.85);
-  border-color: rgba(255, 255, 255, 0.1);
-}
+  /* Dark mode graph overrides (darker bg for canvas-based rendering) */
+  .oc-dark .oc-graph-wrapper,
+  .oc-graph-wrapper.oc-dark {
+    /* GitHub-dark canvas background, intentionally not a token */
+    --oc-bg: #0d1117;
+  }
 
-.oc-dark .oc-graph-search input {
-  background: rgba(13, 17, 23, 0.85);
-  border-color: rgba(255, 255, 255, 0.1);
+  /*
+   * graph-mount.ts stamps .oc-dark on both .oc-graph-wrapper and
+   * .oc-graph-container simultaneously, so the self-variant
+   * (.oc-dark.oc-graph-wrapper) and descendant variant
+   * (.oc-dark .oc-graph-legend) resolve identically.
+   */
+  .oc-dark .oc-graph-legend,
+  .oc-dark.oc-graph-wrapper .oc-graph-legend,
+  .oc-dark .oc-graph-search input {
+    background: rgba(13, 17, 23, 0.85);
+    border-color: var(--oc-border);
+  }
 }

package/src/styles/index.css

@@ -4,16 +4,21 @@
  * CSS with oc- prefix for all class names.
  * CSS custom properties for theme overrides.
  * Dark mode via .oc-dark class on the container.
+ * Cascade layers: oc.tokens, oc.base, oc.components, oc.animation, oc.reduced-motion.
  */
 
 /* For optimal typography, load Inter: https://fonts.google.com/specimen/Inter */
 
+@layer oc.tokens, oc.base, oc.components, oc.animation, oc.reduced-motion;
+
 @import "./tokens.css";
 @import "./dark.css";
 @import "./base.css";
 @import "./chrome.css";
 @import "./tooltip.css";
 @import "./legend.css";
+@import "./series-search.css";
+@import "./you-draw-it.css";
 @import "./table.css";
 @import "./table-animation.css";
 @import "./graph.css";

package/src/styles/keyframes.css

@@ -1,120 +1,151 @@
-/* ---------------------------------------------------------------------------
- * Animation keyframes
- * --------------------------------------------------------------------------- */
+@layer oc.animation {
+  /* ---------------------------------------------------------------------------
+   * Animation keyframes
+   * --------------------------------------------------------------------------- */
 
-/* Bar entrance: clip-path reveal bottom-to-top + fade in (vertical columns).
-   Bars grow upward from baseline with a soft opacity fade. */
-@keyframes oc-enter-bar {
-  from {
-    clip-path: inset(100% 0 0 0);
-    opacity: 0;
+  /* Bar entrance: clip-path reveal bottom-to-top + fade in (vertical columns).
+     Bars grow upward from baseline with a soft opacity fade. */
+  @keyframes oc-enter-bar {
+    from {
+      clip-path: inset(100% 0 0 0);
+      opacity: 0;
+    }
+    75% {
+      opacity: 1;
+    }
+    to {
+      clip-path: inset(0 0 0 0);
+      opacity: 1;
+    }
   }
-  75% {
-    opacity: 1;
-  }
-  to {
-    clip-path: inset(0 0 0 0);
-    opacity: 1;
-  }
-}
 
-/* Bar entrance: clip-path reveal left-to-right + fade in (horizontal bars).
-   Bars grow rightward from axis with a soft opacity fade. */
-@keyframes oc-enter-bar-h {
-  from {
-    clip-path: inset(0 100% 0 0);
-    opacity: 0;
-  }
-  75% {
-    opacity: 1;
-  }
-  to {
-    clip-path: inset(0 0 0 0);
-    opacity: 1;
+  /* Bar entrance: clip-path reveal left-to-right + fade in (horizontal bars).
+     Bars grow rightward from axis with a soft opacity fade. */
+  @keyframes oc-enter-bar-h {
+    from {
+      clip-path: inset(0 100% 0 0);
+      opacity: 0;
+    }
+    75% {
+      opacity: 1;
+    }
+    to {
+      clip-path: inset(0 0 0 0);
+      opacity: 1;
+    }
   }
-}
 
-/* Line/area entrance: clip-path reveal left-to-right + fade in.
-   Lines draw in following reading direction with a soft lead-in. */
-@keyframes oc-enter-line {
-  from {
-    clip-path: inset(0 100% 0 0);
-    opacity: 0;
-  }
-  15% {
-    opacity: 1;
-  }
-  to {
-    clip-path: inset(0 0 0 0);
-    opacity: 1;
+  /* Line/area entrance: clip-path reveal left-to-right + fade in.
+     Lines draw in following reading direction with a soft lead-in. */
+  @keyframes oc-enter-line {
+    from {
+      clip-path: inset(0 100% 0 0);
+      opacity: 0;
+    }
+    15% {
+      opacity: 1;
+    }
+    to {
+      clip-path: inset(0 0 0 0);
+      opacity: 1;
+    }
   }
-}
 
-/* Point/arc entrance: scale up + fade in from center */
-@keyframes oc-enter-point {
-  from {
-    opacity: 0;
-    transform: scale(0.3);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
+  /* Point/arc entrance: scale up + fade in from center */
+  @keyframes oc-enter-point {
+    from {
+      opacity: 0;
+      transform: scale(0.3);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
   }
-}
 
-/* Pure opacity fade (no transform). Safe for elements with existing transforms
-   like arc groups that use translate() for positioning. */
-@keyframes oc-enter-fade-only {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
+  /* Map feature entrance: fade in while transitioning fill from a neutral base
+     to the data-driven color stored in --oc-feature-fill. The target opacity is
+     --oc-feature-target-opacity (default 1) so features under a focus dim
+     animate straight to their dimmed rest opacity instead of hitting 1 and then
+     snapping down when the dim is applied post-animation. */
+  @keyframes oc-enter-map-fill {
+    from {
+      fill: var(--oc-secondary);
+      opacity: 0;
+    }
+    to {
+      fill: var(--oc-feature-fill);
+      opacity: var(--oc-feature-target-opacity, 1);
+    }
   }
-}
 
-/* Fade + subtle slide up for text, rule, tick, annotations */
-@keyframes oc-enter-fade {
-  from {
-    opacity: 0;
-    transform: translateY(4px);
+  /* Map point pop-in: gentle scale from 0.75 + fade. Uses transform-origin to
+     scale from the circle's own center (cx/cy) rather than the SVG origin. */
+  @keyframes oc-enter-map-point {
+    from {
+      opacity: 0;
+      transform: scale(0.75);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
   }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
 
-/* Table row entrance: slide up only, no opacity (cells fade independently
-   to avoid opacity compounding between row and cell animations) */
-@keyframes oc-table-enter-row {
-  from {
-    transform: translateY(6px);
+  /* Pure opacity fade (no transform). Safe for elements with existing transforms
+     like arc groups that use translate() for positioning. */
+  @keyframes oc-enter-fade-only {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
   }
-  to {
-    transform: translateY(0);
-  }
-}
 
-/* Table bar fill entrance: clip-path grow only, no opacity
-   (preserves resting opacity: 0.15 from table.css) */
-@keyframes oc-table-enter-bar-fill {
-  from {
-    clip-path: inset(0 100% 0 0);
+  /* Fade + subtle slide up for text, rule, tick, annotations */
+  @keyframes oc-enter-fade {
+    from {
+      opacity: 0;
+      transform: translateY(4px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
   }
-  to {
-    clip-path: inset(0 0 0 0);
+
+  /* Table row entrance: slide up only, no opacity (cells fade independently
+     to avoid opacity compounding between row and cell animations) */
+  @keyframes oc-table-enter-row {
+    from {
+      transform: translateY(6px);
+    }
+    to {
+      transform: translateY(0);
+    }
   }
-}
 
-/* Tooltip entrance */
-@keyframes oc-tooltip-in {
-  from {
-    opacity: 0;
-    transform: translateY(2px);
+  /* Table bar fill entrance: clip-path grow only, no opacity
+     (preserves resting opacity: 0.15 from table.css) */
+  @keyframes oc-table-enter-bar-fill {
+    from {
+      clip-path: inset(0 100% 0 0);
+    }
+    to {
+      clip-path: inset(0 0 0 0);
+    }
   }
-  to {
-    opacity: 1;
-    transform: translateY(0);
+
+  /* Tooltip entrance */
+  @keyframes oc-tooltip-in {
+    from {
+      opacity: 0;
+      transform: translateY(2px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
   }
 }

package/src/styles/legend.css

@@ -1,16 +1,18 @@
-/* ---------------------------------------------------------------------------
- * Legend
- * --------------------------------------------------------------------------- */
+@layer oc.components {
+  /* ---------------------------------------------------------------------------
+   * Legend
+   * --------------------------------------------------------------------------- */
 
-.oc-legend {
-  font-family: var(--oc-font-family);
-  font-size: var(--oc-body-size);
-}
+  .oc-legend {
+    font-family: var(--oc-font-family);
+    font-size: var(--oc-body-size);
+  }
 
-.oc-legend-entry {
-  cursor: default;
-}
+  .oc-legend-entry {
+    cursor: default;
+  }
 
-.oc-legend text {
-  fill: var(--oc-legend-text);
+  .oc-legend text {
+    fill: var(--oc-legend-text);
+  }
 }

package/src/styles/reduced-motion.css

@@ -1,46 +1,67 @@
 /* ---------------------------------------------------------------------------
  * Reduced motion
+ *
+ * Catch-all: last-declared layer beats every earlier layer regardless of
+ * specificity. No !important, no hand-maintained selector mirror.
+ *
+ * Selector list matches CSS_TOKEN_ROOT_SELECTORS in token-definitions.ts.
  * --------------------------------------------------------------------------- */
 
-@media (prefers-reduced-motion: reduce) {
-  .oc-table-sort-btn::before,
-  .oc-table-sort-btn::after,
-  .oc-table-search input,
-  .oc-table-pagination button {
-    transition: none;
-  }
-
-  /* Disable all chart entrance animations */
-  .oc-animate .oc-mark-rect rect,
-  .oc-animate .oc-mark-bar rect,
-  .oc-animate .oc-mark-arc,
-  .oc-animate .oc-mark-line,
-  .oc-animate .oc-mark-area,
-  .oc-animate circle.oc-mark-point,
-  .oc-animate circle.oc-mark-circle,
-  .oc-animate .oc-mark-text text,
-  .oc-animate .oc-mark-rule line,
-  .oc-animate .oc-mark-tick line,
-  .oc-animate .oc-mark-label,
-  .oc-animate .oc-annotation,
-  .oc-animate .oc-sankey-node rect,
-  .oc-animate .oc-sankey-link path {
-    animation: none;
-  }
-
-  /* Disable all table entrance animations */
-  .oc-table-wrapper.oc-animate > .oc-chrome,
-  .oc-table-wrapper.oc-animate thead,
-  .oc-table-wrapper.oc-animate tbody tr,
-  .oc-table-wrapper.oc-animate tbody td,
-  .oc-table-wrapper.oc-animate td.oc-table-heatmap,
-  .oc-table-wrapper.oc-animate td.oc-table-category,
-  .oc-table-wrapper.oc-animate .oc-table-bar-fill,
-  .oc-table-wrapper.oc-animate .oc-table-sparkline > svg,
-  .oc-table-wrapper.oc-animate .oc-table-sparkline-dot,
-  .oc-table-wrapper.oc-animate .oc-table-sparkline-labels,
-  .oc-table-wrapper.oc-animate .oc-table-search,
-  .oc-table-wrapper.oc-animate .oc-table-pagination {
-    animation: none;
+@layer oc.reduced-motion {
+  @media (prefers-reduced-motion: reduce) {
+    :is(
+        .oc-root,
+        .oc-chart-root,
+        .oc-table-wrapper,
+        .oc-table-root,
+        .oc-graph-wrapper,
+        .oc-graph-root,
+        .oc-sankey-root,
+        .oc-tilemap-root,
+        .oc-barlist-root,
+        .oc-map-root
+      ),
+    :is(
+        .oc-root,
+        .oc-chart-root,
+        .oc-table-wrapper,
+        .oc-table-root,
+        .oc-graph-wrapper,
+        .oc-graph-root,
+        .oc-sankey-root,
+        .oc-tilemap-root,
+        .oc-barlist-root,
+        .oc-map-root
+      )
+      *,
+    :is(
+        .oc-root,
+        .oc-chart-root,
+        .oc-table-wrapper,
+        .oc-table-root,
+        .oc-graph-wrapper,
+        .oc-graph-root,
+        .oc-sankey-root,
+        .oc-tilemap-root,
+        .oc-barlist-root,
+        .oc-map-root
+      )
+      *::before,
+    :is(
+        .oc-root,
+        .oc-chart-root,
+        .oc-table-wrapper,
+        .oc-table-root,
+        .oc-graph-wrapper,
+        .oc-graph-root,
+        .oc-sankey-root,
+        .oc-tilemap-root,
+        .oc-barlist-root,
+        .oc-map-root
+      )
+      *::after {
+      animation: none;
+      transition: none;
+    }
   }
 }