@buildcanada/charts 0.2.2 → 0.3.2

package/src/grapher/modal/Modal.scss

@@ -18,8 +18,9 @@
 
         .modal-content {
             position: absolute;
-            border-radius: 4px;
+            border-radius: 0;
             background: #fff;
+            border: 1px solid $gray-20;
             box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.15);
             min-height: 150px;
         }

package/src/grapher/noDataModal/NoDataModal.tsx

@@ -69,14 +69,12 @@ export class NoDataModal extends React.Component<NoDataModalProps> {
         const helpText = this.props.helpText ?? defaultHelpText
 
         const center = bounds.centerPos
-        const padding = 0.75 * this.fontSize
+        const padding = 1.25 * this.fontSize
         const showHelpText = !isStatic && !!helpText
-        const helpTextFontSize = 0.9 * this.fontSize
+        const helpTextFontSize = 0.85 * this.fontSize
 
         return (
             <g className="no-data">
-                <rect {...bounds.toProps()} fill="#fff" opacity={0.6} />
-
                 <Halo
                     id="no-data-message"
                     outlineWidth={GRAPHER_TEXT_OUTLINE_FACTOR * this.fontSize}
@@ -85,11 +83,7 @@ export class NoDataModal extends React.Component<NoDataModalProps> {
                     <text
                         x={center.x}
                         y={center.y}
-                        dy={
-                            showHelpText
-                                ? -padding / 2
-                                : dyFromAlign(VerticalAlign.middle)
-                        }
+                        dy={showHelpText ? -padding / 4 : 4}
                         textAnchor="middle"
                         fontSize={this.fontSize}
                         fontWeight={500}

package/src/grapher/tabs/Tabs.scss

@@ -1,3 +1,10 @@
+/*******************************************************************************
+ * Tabs
+ *
+ * Tab component styling for chart/table switchers.
+ * Uses Build Canada design system colors - no rounded edges.
+ ******************************************************************************/
+
 .Tabs {
     position: relative;
 
@@ -16,23 +23,30 @@
             flex-shrink: 0;
             display: inline-block;
             margin: 0 8px 8px 0;
-            padding: 8px;
-            border: 1px solid $blue-10;
-            background: #fff;
-            color: $dark-text;
+            padding: 10px 16px;
+            border: 1px solid $gray-20;
+            border-radius: 0;
+            background: $white;
+            color: $charcoal;
             white-space: normal;
             cursor: pointer;
             text-wrap: balance;
+            transition: all 150ms ease;
 
             &[data-hovered] {
                 background-color: $gray-10;
-                border-color: $gray-10;
+                border-color: $gray-30;
             }
 
             &[data-selected] {
-                background: $accent-pale-blue;
-                border-color: $accent-pale-blue;
-                color: $blue-90;
+                background: $cerulean-100;
+                border-color: $cerulean-500;
+                color: $cerulean-900;
+            }
+
+            &:focus-visible {
+                outline: 2px solid $auburn;
+                outline-offset: 2px;
             }
         }
     }
@@ -58,73 +72,79 @@
         );
     }
 
-    // Variant: slim
+    // Variant: slim (for Chart/Table switcher)
     &.Tabs--variant-slim {
         $font-size: var(--tabs-font-size, 13px);
         --tab-padding: 16px;
 
         $light-stroke: $gray-20;
-
         $hover-fill: $gray-10;
-        $active-fill: $blue-20;
-
-        $border-radius: 4px;
-        $visual-gap: 2px;
+        $active-fill: $auburn-500;
+        $visual-gap: 0;
 
         display: flex;
         height: $controlRowHeight;
         margin: 0;
-        padding: $visual-gap;
-        // using a box-shadow instead of a border fixes a bug
-        // where the tab items weren't centered when zoomed in or out
+        padding: 0;
         box-shadow: inset 0 0 0 1px $light-stroke;
-        border-radius: $border-radius;
+        border-radius: 0;
 
         .Tabs__Tab {
             position: relative;
 
-            $height: $controlRowHeight - 2 * $visual-gap;
+            $height: $controlRowHeight;
 
             display: block;
-            text-transform: capitalize;
-            color: $light-text;
+            text-transform: uppercase;
+            letter-spacing: 0.02em;
+            color: $charcoal;
             font-size: $font-size;
             font-weight: 500;
             height: $height;
             line-height: $height;
-            border-radius: $border-radius - $visual-gap;
+            border-radius: 0;
             padding: 0 var(--tab-padding);
             cursor: pointer;
-            letter-spacing: 0.01em;
             white-space: nowrap;
             user-select: none;
             text-align: center;
             text-overflow: ellipsis;
             overflow: hidden;
+            transition: all 150ms ease;
+            background-color: $white;
 
             &[data-hovered] {
                 background-color: $hover-fill;
             }
 
             &[data-selected] {
-                color: $active-text;
+                color: $white;
                 background-color: $active-fill;
+
+                svg {
+                    color: $white;
+                }
+            }
+
+            &:focus-visible {
+                outline: 2px solid $auburn;
+                outline-offset: -2px;
             }
         }
 
-        // separators between tabs
+        // Separators between tabs
         .Tabs__Tab + .Tabs__Tab::before {
             content: "";
             display: block;
             width: 1px;
-            height: calc(100% - 12px);
+            height: calc(100% - 8px);
             position: absolute;
-            top: 6px;
+            top: 4px;
             background-color: $light-stroke;
             left: -0.5px;
         }
 
-        // hide separators when a tab is hovered over or when a tab is active
+        // Hide separators when a tab is hovered over or when a tab is active
         .Tabs__Tab[data-selected]::before,
         .Tabs__Tab[data-hovered]::before,
         .Tabs__Tab[data-selected] + .Tabs__Tab::before,
@@ -139,7 +159,7 @@
         gap: 8px;
 
         $hover-fill: $gray-10;
-        $active-fill: $accent-pale-blue;
+        $active-fill: $cerulean-100;
 
         .Tabs__Tab {
             flex-grow: 1;
@@ -147,22 +167,29 @@
 
             @include grapher_label-2-medium;
             display: inline-block;
-            padding: 8px;
-            border: 1px solid $blue-10;
-            background: #fff;
-            color: $dark-text;
+            padding: 10px 16px;
+            border: 1px solid $gray-20;
+            border-radius: 0;
+            background: $white;
+            color: $charcoal;
             cursor: pointer;
             text-wrap: balance;
+            transition: all 150ms ease;
 
             &[data-hovered] {
                 background-color: $hover-fill;
-                border-color: $hover-fill;
+                border-color: $gray-30;
             }
 
             &[data-selected] {
                 background: $active-fill;
-                border-color: $active-fill;
-                color: $blue-90;
+                border-color: $cerulean-500;
+                color: $cerulean-900;
+            }
+
+            &:focus-visible {
+                outline: 2px solid $auburn;
+                outline-offset: 2px;
             }
         }
     }

package/src/grapher/timeline/TimelineComponent.scss

@@ -1,22 +1,29 @@
+/*******************************************************************************
+ * Timeline Component
+ *
+ * Year slider and playback controls.
+ * Uses Build Canada design system colors.
+ ******************************************************************************/
+
 $timelineHeight: 32px;
 
 .timeline-component {
-    // diameter of the start and and handle
-    $handle-diameter: 20px; // keep in sync with HANDLE_DIAMETER in TimelineComponent.tsx
+    // Diameter of the start and end handle
+    $handle-diameter: 20px; // Keep in sync with HANDLE_DIAMETER in TimelineComponent.tsx
 
-    // start and end handles
-    $default-knob: $gray-60;
-    $active-knob: $blue-50;
+    // Start and end handles
+    $default-knob: $gray-50;
+    $active-knob: $auburn;
 
-    // timeline slider and interval
+    // Timeline slider and interval
     $light-timeline: $gray-20;
-    $active-timeline: $blue-30;
-    $hover-timeline: $default-knob;
+    $active-timeline: $auburn-500;
+    $hover-timeline: $auburn;
 
-    // start/end year label
-    $light-fill: $gray-10;
-    $hover-fill: $gray-20;
-    $active-fill: $blue-20;
+    // Start/end year label
+    $light-fill: $white;
+    $hover-fill: $gray-10;
+    $active-fill: $cerulean-100;
 
     width: 100%;
     height: $timelineHeight;
@@ -34,24 +41,34 @@ $timelineHeight: 32px;
 
     .date {
         height: 100%;
+        font-family: $sans-serif-font-stack;
         font-size: 13px;
-        font-weight: 400;
-        color: $dark-text;
-        padding: 0 8px;
-        border-radius: 4px;
+        font-weight: 500;
+        color: $charcoal;
+        padding: 0 12px;
+        border-radius: 0;
         display: grid;
         place-content: center;
         margin-right: 0;
         background-color: $light-fill;
         user-select: none;
+        border: 1px solid $gray-20;
+        transition: all 150ms ease;
 
         &:hover {
             background: $hover-fill;
+            cursor: pointer;
         }
 
         &:active {
             background: $active-fill;
-            color: $active-text;
+            border-color: $cerulean-500;
+            color: $cerulean-900;
+        }
+
+        &:focus-visible {
+            outline: 2px solid $auburn;
+            outline-offset: 2px;
         }
     }
 
@@ -88,15 +105,15 @@ $timelineHeight: 32px;
         > .icon {
             height: $handle-diameter;
             width: $handle-diameter;
-            border-radius: 100%;
+            border-radius: 0;
 
             background: $default-knob;
-            border: 2px solid #fff;
+            border: 2px solid $white;
             z-index: 1;
             pointer-events: none;
 
             transform: scale(1);
-            transition: transform 0.1s ease-out;
+            transition: transform 0.15s ease-out, background 0.15s ease;
         }
     }
 
@@ -129,7 +146,7 @@ $timelineHeight: 32px;
 
     &.hover {
         .handle > .icon {
-            transform: scale(1.3);
+            transform: scale(1.2);
         }
 
         .handle:not(.hoverMarker) > .icon {
@@ -137,3 +154,40 @@ $timelineHeight: 32px;
         }
     }
 }
+
+/*******************************************************************************
+ * Play/Pause Button
+ ******************************************************************************/
+
+.timeline-play-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: $timelineHeight;
+    height: $timelineHeight;
+    background: $white;
+    border: 1px solid $gray-20;
+    border-radius: 0;
+    cursor: pointer;
+    color: $charcoal;
+    transition: all 150ms ease;
+
+    &:hover {
+        background: $gray-20;
+    }
+
+    &:active {
+        background: $cerulean-100;
+        border-color: $cerulean-500;
+        color: $cerulean-900;
+    }
+
+    &:focus-visible {
+        outline: 2px solid $auburn;
+        outline-offset: 2px;
+    }
+
+    svg {
+        font-size: 12px;
+    }
+}

package/src/grapher/tooltip/Tooltip.scss

@@ -34,7 +34,7 @@
         }
 
         > .Tooltip {
-            border-radius: 4px;
+            border-radius: 0;
             border: 1px solid $background-stroke;
             box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.2);
             background: white;
@@ -57,7 +57,7 @@
                 background: $background-fill;
                 color: black;
                 padding: 8px 12px;
-                border-radius: 3px 3px 0 0;
+                border-radius: 0;
 
                 .title,
                 .subtitle {
@@ -93,7 +93,7 @@
             }
 
             &.plain header {
-                border-radius: 3px;
+                border-radius: 0;
                 background: white;
             }
 
@@ -383,7 +383,7 @@
                 position: relative;
                 color: $grey;
                 padding: 4px 12px;
-                border-radius: 0 0 3px 3px;
+                border-radius: 0;
                 border-top: 1px solid $light-grey;
 
                 .line {

package/src/styles/charts.scss

@@ -7,6 +7,9 @@
  *   import '@buildcanada/charts/styles.css'
  */
 
+// Import Build Canada design system fonts
+@use "@buildcanada/components/src/styles/fonts";
+
 // Import the main grapher styles which include all component styles
 @import "../grapher/core/grapher.scss";