Updated column components renderer

Author: davenquinn

packages/column-components/stories/base-section.ts

@@ -1,4 +1,4 @@
-import h, { compose } from "@macrostrat/hyper";
+import hyper, { compose } from "@macrostrat/hyper";
 import {
   ColumnProvider,
   ColumnSVG,
@@ -17,7 +17,9 @@ import {
   TimescaleOrientation,
   IncreaseDirection,
 } from "@macrostrat/timescale";
-import "./measured-section.sass";
+import styles from "./measured-section.module.sass";
+
+const h = hyper.styled(styles);
 
 function patternPath(id) {
   return `../../../deps/geologic-patterns/assets/svg/${id}.svg`;

packages/column-components/stories/measured-section.module.sass

@@ -0,0 +1,72 @@
+//:global
+//  @require "./imported"
+
+@use "sass:color"
+
+:global
+
+  .measured-section
+    display: flex
+    flex-direction: row
+    .timescale
+      margin-top: 30px
+    .spacer
+      flex-grow: 2
+
+  .column-array
+    display: flex
+    flex-direction: row
+    padding: 1em
+    .spacer
+      flex-grow: 2
+
+    .timescale
+      margin-top: 30px
+
+  .labeled-unit div.unit-overlay
+    font-size: 14px
+    text-align: center
+
+  g.unit
+    rect.unit
+      stroke-width: 1.5px
+
+  g.lithology-column use.frame
+      stroke: black
+
+  @media (prefers-color-scheme: dark)
+    .lithology-column .frame
+      stroke: white
+    g.inner
+      pattern: image
+      filter: invert(100%)
+
+  .column.age-axis
+    width: 55px
+
+  .column .tick text
+    font-size: 14px
+
+  .column
+    flex: 0
+    .age-axis-label
+      font-size: 14px
+
+  .map-area
+    height: 220px
+
+  @mixin interval($color)
+    &>.interval-box
+      margin: 0px
+      background-color: color.adjust($color, $lightness: 50%)
+      border: 2px solid color.adjust($color, $lightness: 10%) !important
+      .interval-label
+        color: color.adjust($color, $lightness: -30%)
+
+  .interval
+    &.Blueflower
+      @include interval(dodgerblue)
+    &.Gametrail
+      @include  interval(#c0ddc6)
+    &.Rackla
+      @include interval(#aaa)

packages/column-components/stories/measured-section.sass

@@ -2,7 +2,7 @@ import h from "@macrostrat/hyper";
 import { ColumnDivision, ColumnSurface } from "@macrostrat/column-components";
 import { BaseUnit } from "@macrostrat/api-types";
 import { IUnit } from "@macrostrat/column-views";
-import "./measured-section.sass";
+import "./measured-section.module.sass";
 
 import { MeasuredSection } from "./base-section";
 

packages/column-components/stories/measured-section.stories.ts

@@ -5,7 +5,7 @@ import {
   ParameterIntervals,
 } from "@macrostrat/column-components";
 import { BaseUnit } from "@macrostrat/api-types";
-import "./measured-section.sass";
+import "./measured-section.module.sass";
 import zebraNappeIntervals from "./naukluft-intervals.json";
 import namaIntervals from "./nama-intervals.json";
 import "./zebra-nappe.sass";