@buildcanada/charts 0.2.2 → 0.3.2

package/src/components/closeButton/CloseButton.scss

@@ -1,10 +1,16 @@
+/*******************************************************************************
+ * Close Button
+ *
+ * Circular close/dismiss button.
+ * Uses Build Canada design system colors.
+ ******************************************************************************/
+
 .close-button {
-    // keep in sync with CLOSE_BUTTON_SIZE in CloseButton.tsx
+    // Keep in sync with CLOSE_BUTTON_SIZE in CloseButton.tsx
     $size: 32px;
 
     $light-stroke: $gray-20;
-
-    $active-fill: #dbe5f0;
+    $active-fill: $cerulean-100;
     $hover-fill: $gray-10;
 
     display: flex;
@@ -14,23 +20,30 @@
     position: relative;
     height: $size;
     width: $size;
-    padding: 7px;
+    padding: 0;
 
-    color: $light-text;
-    background: white;
+    color: $gray-60;
+    background: $white;
     border: 1px solid $light-stroke;
-    border-radius: 50%;
+    border-radius: 0;
+    cursor: pointer;
+    transition: all 150ms ease;
 
     &:hover {
         background: $hover-fill;
-        border-color: $hover-fill;
-        cursor: pointer;
-        color: $dark-text;
+        border-color: $gray-30;
+        color: $charcoal;
     }
 
     &:active {
         background: $active-fill;
-        border: 1px solid $active-fill;
+        border-color: $cerulean-500;
+        color: $cerulean-900;
+    }
+
+    &:focus-visible {
+        outline: 2px solid $auburn;
+        outline-offset: 2px;
     }
 
     svg {

package/src/components/styles/colors.scss

@@ -1,89 +1,208 @@
 /*******************************************************************************
- * Colors
- */
+ * Colors - Build Canada Design System
+ *
+ * This file imports and extends the Build Canada color tokens for use in charts.
+ ******************************************************************************/
 
 @use "sass:color";
 
-// Brand colors
-$oxford-blue: #002147;
-$vermillion: #ce261e;
-$amber: #f7c020;
-
-// Blue shades
-$blue-100: #002147;
-$blue-95: #112e4f;
-$blue-90: #1d3d63;
-$blue-60: #577291;
-$blue-65: #46688f;
-$blue-50: #6e87a2;
-$blue-40: #98a9bd;
-$blue-30: #a4b6ca;
-$blue-20: #dbe5f0;
-$blue-10: #ebeef2;
-$blue-5: #f0f4fa;
-
-// Gray shades
-$gray-100: #2d2e2d;
-$gray-90: #4e4e4e;
-$gray-80: #5b5b5b;
-$gray-70: #767676;
-$gray-60: #a1a1a1;
-$gray-50: #c6c6c6;
-$gray-30: #dadada;
-$gray-20: #e7e7e7;
-$gray-10: #f2f2f2;
+/*******************************************************************************
+ * Import Build Canada Design Tokens
+ ******************************************************************************/
+
+@use "@buildcanada/components/src/styles/tokens" as bc;
+
+/*******************************************************************************
+ * Brand Colors (from Build Canada design system)
+ ******************************************************************************/
+
+$linen: bc.$linen;
+$charcoal: bc.$charcoal;
+$auburn: bc.$auburn;
+$white: bc.$white;
+
+/*******************************************************************************
+ * Primary Color Scale - Auburn (Red)
+ ******************************************************************************/
+
+$auburn-50: bc.$auburn-50;
+$auburn-100: bc.$auburn-100;
+$auburn-200: bc.$auburn-200;
+$auburn-300: bc.$auburn-300;
+$auburn-400: bc.$auburn-400;
+$auburn-500: bc.$auburn-500;
+$auburn-600: bc.$auburn-600;
+$auburn-700: bc.$auburn-700;
+$auburn-800: bc.$auburn-800;
+$auburn-900: bc.$auburn-900;
+$auburn-950: bc.$auburn-950;
+
+/*******************************************************************************
+ * Secondary Color Scale - Cerulean (Blue)
+ ******************************************************************************/
+
+$cerulean-50: bc.$cerulean-50;
+$cerulean-100: bc.$cerulean-100;
+$cerulean-200: bc.$cerulean-200;
+$cerulean-300: bc.$cerulean-300;
+$cerulean-400: bc.$cerulean-400;
+$cerulean-500: bc.$cerulean-500;
+$cerulean-600: bc.$cerulean-600;
+$cerulean-700: bc.$cerulean-700;
+$cerulean-800: bc.$cerulean-800;
+$cerulean-900: bc.$cerulean-900;
+$cerulean-950: bc.$cerulean-950;
+
+/*******************************************************************************
+ * Tertiary Color Scale - Sienna (Orange)
+ ******************************************************************************/
+
+$sienna-50: bc.$sienna-50;
+$sienna-100: bc.$sienna-100;
+$sienna-200: bc.$sienna-200;
+$sienna-300: bc.$sienna-300;
+$sienna-400: bc.$sienna-400;
+$sienna-500: bc.$sienna-500;
+$sienna-600: bc.$sienna-600;
+$sienna-700: bc.$sienna-700;
+$sienna-800: bc.$sienna-800;
+$sienna-900: bc.$sienna-900;
+$sienna-950: bc.$sienna-950;
+
+/*******************************************************************************
+ * Supporting Color Scale - Fantasia (Purple)
+ ******************************************************************************/
+
+$fantasia-50: bc.$fantasia-50;
+$fantasia-100: bc.$fantasia-100;
+$fantasia-200: bc.$fantasia-200;
+$fantasia-300: bc.$fantasia-300;
+$fantasia-400: bc.$fantasia-400;
+$fantasia-500: bc.$fantasia-500;
+$fantasia-600: bc.$fantasia-600;
+$fantasia-700: bc.$fantasia-700;
+$fantasia-800: bc.$fantasia-800;
+$fantasia-900: bc.$fantasia-900;
+$fantasia-950: bc.$fantasia-950;
+
+/*******************************************************************************
+ * Supporting Color Scale - Emerald (Green)
+ ******************************************************************************/
+
+$emerald-50: bc.$emerald-50;
+$emerald-100: bc.$emerald-100;
+$emerald-200: bc.$emerald-200;
+$emerald-300: bc.$emerald-300;
+$emerald-400: bc.$emerald-400;
+$emerald-500: bc.$emerald-500;
+$emerald-600: bc.$emerald-600;
+$emerald-700: bc.$emerald-700;
+$emerald-800: bc.$emerald-800;
+$emerald-900: bc.$emerald-900;
+$emerald-950: bc.$emerald-950;
+
+/*******************************************************************************
+ * Gray Scale
+ ******************************************************************************/
+
 $gray-5: #f7f7f7;
+$gray-10: bc.$gray-100;
+$gray-20: bc.$gray-200;
+$gray-30: bc.$gray-300;
+$gray-50: bc.$gray-400;
+$gray-60: bc.$gray-500;
+$gray-70: bc.$gray-600;
+$gray-80: bc.$gray-700;
+$gray-90: bc.$gray-800;
+$gray-100: bc.$gray-900;
 
-// Amber shades
-$amber-110: #f9cf44;
-$amber-10: #f4eddb;
-
-$beige: #fbf9f3;
-$white: #ffffff;
-
-// Accent colors
-$accent-electric-blue: #2162e6;
-$accent-pale-blue: #e7f2ff;
-$accent-vermillion: #b40000;
-
-// Visited
-$purple-90: #631d49;
-$purple-60: #91577c;
-$visited-light: #b398a9;
-
-/* Text colors */
-$tertiary-text-color: $amber;
-$grey-text-color: #616161;
-$text-color: $blue-90;
-$secondary-text-color: $blue-60;
-$bluish-grey-text-color: $blue-50;
-$error-text-color: $vermillion;
-
-/* Category colors */
-$population-color: #2082a2;
-$health-color: #bf1b1b;
-$food-color: #588a0f;
-$energy-color: #ca6f34;
-$environment-color: #0c6947;
-$technology-color: #2774c6;
-$growth-inequality-color: #009655;
-$work-life-color: #ab348a;
-$public-sector-color: #eb6400;
-$global-connections-color: #17393d;
-$war-peace-color: #660000;
-$politics-color: #1b0655;
-$violence-rights-color: #cc235c;
-$education-color: #253f77;
-$media-color: #0089be;
-$culture-color: #af488f;
-
-/* Controls color */
-$controls-color: #0073e6;
+/*******************************************************************************
+ * Legacy Brand Colors (backwards compatibility)
+ * Maps old OWID colors to Build Canada equivalents
+ ******************************************************************************/
+
+$oxford-blue: $charcoal;
+$vermillion: $auburn;
+$amber: $sienna-400;
+
+// Legacy blue shades mapped to cerulean
+$blue-100: $cerulean-950;
+$blue-95: $cerulean-900;
+$blue-90: $cerulean-800;
+$blue-65: $cerulean-700;
+$blue-60: $cerulean-600;
+$blue-50: $cerulean-500;
+$blue-40: $cerulean-400;
+$blue-30: $cerulean-300;
+$blue-20: $cerulean-200;
+$blue-10: $cerulean-100;
+$blue-5: $cerulean-50;
+
+// Legacy amber shades mapped to sienna
+$amber-110: $sienna-300;
+$amber-10: $sienna-50;
+
+$beige: $linen;
+
+/*******************************************************************************
+ * Accent Colors
+ ******************************************************************************/
+
+$accent-electric-blue: $cerulean-500;
+$accent-pale-blue: $cerulean-50;
+$accent-vermillion: $auburn-700;
+
+// Visited link colors mapped to fantasia (purple)
+$purple-90: $fantasia-800;
+$purple-60: $fantasia-600;
+$visited-light: $fantasia-300;
+
+/*******************************************************************************
+ * Text Colors
+ ******************************************************************************/
+
+$text-color: $charcoal;
+$secondary-text-color: bc.$gray-600;
+$tertiary-text-color: $sienna-500;
+$grey-text-color: bc.$gray-500;
+$bluish-grey-text-color: $cerulean-600;
+$error-text-color: $auburn;
+
+/*******************************************************************************
+ * Category Colors (for data visualization)
+ * Using Build Canada palette
+ ******************************************************************************/
+
+$population-color: $cerulean-500;
+$health-color: $auburn-500;
+$food-color: $emerald-600;
+$energy-color: $sienna-500;
+$environment-color: $emerald-800;
+$technology-color: $cerulean-600;
+$growth-inequality-color: $emerald-500;
+$work-life-color: $fantasia-500;
+$public-sector-color: $sienna-400;
+$global-connections-color: $cerulean-900;
+$war-peace-color: $auburn-900;
+$politics-color: $fantasia-900;
+$violence-rights-color: $auburn-400;
+$education-color: $cerulean-800;
+$media-color: $cerulean-400;
+$culture-color: $fantasia-600;
+
+/*******************************************************************************
+ * Controls & UI Colors
+ ******************************************************************************/
+
+$controls-color: $cerulean-500;
 $light-shadow:
-    rgba(0, 0, 0, 0.1) 0px 0px 0px 1px,
-    rgba(0, 0, 0, 0.08) 0px 2px 2px;
+    rgba(39, 39, 39, 0.1) 0px 0px 0px 1px,
+    rgba(39, 39, 39, 0.08) 0px 2px 2px;
+
+/*******************************************************************************
+ * SDG Colors (UN Sustainable Development Goals)
+ ******************************************************************************/
 
-/* SDG colors */
 $sdgColors: (
     1: color.scale(#e5243b, $lightness: -15%),
     2: #dda63a,
@@ -104,9 +223,20 @@ $sdgColors: (
     17: color.scale(#19486a, $lightness: -15%),
 );
 
+/*******************************************************************************
+ * CSS Custom Properties Export
+ ******************************************************************************/
+
 :root {
-    // See also gdocTypes/Gdoc.ts > GdocPostContent > cover-color
+    // Brand colors
+    --bc-linen: #{$linen};
+    --bc-charcoal: #{$charcoal};
+    --bc-auburn: #{$auburn};
+
+    // Legacy variables for backwards compatibility
     --amber: #{$amber};
+
+    // SDG colors
     @each $i, $sdgColor in $sdgColors {
         --sdg-color-#{$i}: #{$sdgColor};
     }

package/src/components/styles/typography.scss

@@ -1,9 +1,15 @@
-$sans-serif-font-stack:
-    Lato, "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
-$serif-font-stack:
-    "Playfair Display", Georgia, "Times New Roman", "Liberation Serif", serif;
-$monospace-font-stack:
-    "Menlo", "Courier New", Courier, monospace; // only to be used for code blocks
+// Build Canada brand fonts
+// Headlines: Söhne Kraftig - modern neo-grotesque
+// Body: Financier Text - serif for readability
+// Mono: Founder's Grotesk Mono - for data/code
+$font-headline: "Soehne Kraftig", "Helvetica Neue", Helvetica, Arial, sans-serif;
+$font-body: "Financier Text", Georgia, "Times New Roman", serif;
+$font-mono: "Founders Grotesk Mono", "Menlo", "Courier New", monospace;
+
+// Legacy aliases for backwards compatibility
+$sans-serif-font-stack: $font-headline;
+$serif-font-stack: $font-body;
+$monospace-font-stack: $font-mono;
 $default-font-features: "liga", "kern", "calt", "lnum";
 
 //

package/src/grapher/color/ColorConstants.ts

@@ -1,20 +1,34 @@
-// gray shades
-export const GRAY_100 = "#2d2e2d"
-export const GRAY_90 = "#4e4e4e"
-export const GRAY_80 = "#5b5b5b"
-export const GRAY_70 = "#767676"
-export const GRAY_60 = "#a1a1a1"
-export const GRAY_50 = "#c6c6c6"
-export const GRAY_30 = "#dadada"
-export const GRAY_20 = "#e7e7e7"
-export const GRAY_10 = "#f2f2f2"
-export const GRAY_5 = "#f7f7f7"
+/*******************************************************************************
+ * Color Constants
+ *
+ * Uses Build Canada design system colors.
+ ******************************************************************************/
 
-export const GRAPHER_BACKGROUND_DEFAULT = "#ffffff"
-export const GRAPHER_BACKGROUND_BEIGE = "#fbf9f3"
+// Build Canada brand colors
+export const LINEN = "#F6ECE3"
+export const CHARCOAL = "#272727"
+export const AUBURN = "#932F2F"
 
-export const GRAPHER_DARK_TEXT = GRAY_80
-export const GRAPHER_LIGHT_TEXT = GRAY_70
+// Gray shades
+export const GRAY_100 = "#171717"
+export const GRAY_90 = "#272727"
+export const GRAY_80 = "#404040"
+export const GRAY_70 = "#525252"
+export const GRAY_60 = "#737373"
+export const GRAY_50 = "#a3a3a3"
+export const GRAY_30 = "#d4d4d4"
+export const GRAY_20 = "#e5e5e5"
+export const GRAY_10 = "#f5f5f5"
+export const GRAY_5 = "#fafafa"
 
+// Grapher backgrounds - using Build Canada linen
+export const GRAPHER_BACKGROUND_DEFAULT = LINEN
+export const GRAPHER_BACKGROUND_BEIGE = LINEN
+
+// Text colors
+export const GRAPHER_DARK_TEXT = CHARCOAL
+export const GRAPHER_LIGHT_TEXT = GRAY_60
+
+// Other
 export const NO_DATA_GRAY = "#6e7581"
 export const ERROR_COLOR = "ff0002"

package/src/grapher/controls/ActionButtons.scss

@@ -1,57 +1,63 @@
-// keep in sync with constant values in ActionButtons.tsx
-$actionButtonHeight: 32px; // keep in sync with BUTTON_HEIGHT
-$paddingBetweenActionButtons: 8px; // keep in sync with PADDING_BETWEEN_BUTTONS
-$paddingBetweenIconAndLabel: 8px; // keep in sync with PADDING_BETWEEN_ICON_AND_LABEL
-$paddingX: 12px; // keep in sync with PADDING_X
+/*******************************************************************************
+ * Action Buttons
+ *
+ * Row of action buttons in the grapher (download, share, etc.)
+ * Uses Build Canada design system colors.
+ ******************************************************************************/
+
+// Keep in sync with constant values in ActionButtons.tsx
+$actionButtonHeight: 32px;
+$paddingBetweenActionButtons: 8px;
+$paddingBetweenIconAndLabel: 8px;
+$paddingX: 12px;
 
 .ActionButtons {
     margin: 0;
     padding: 0;
-    white-space: nowrap;
+    height: $actionButtonHeight;
 
     ul {
         display: flex;
         list-style: none;
-        height: $actionButtonHeight;
+        height: 100%;
         padding: 0;
+        margin: 0;
+        gap: $paddingBetweenActionButtons;
     }
 
     li {
         height: 100%;
-        display: inline-block;
+        display: flex;
         position: relative;
     }
-
-    li + li {
-        margin-left: $paddingBetweenActionButtons;
-    }
 }
 
 div.ActionButton {
-    --light-fill: #{$gray-10};
-    --hover-fill: #{$gray-20};
-    --active-fill: #{$blue-20};
-    --text-color: #{$dark-text};
+    --light-fill: #{$white};
+    --hover-fill: #{$gray-10};
+    --active-fill: #{$cerulean-100};
+    --text-color: #{$charcoal};
+    --border-color: #{$gray-20};
 
     &.ActionButton--exploreData {
-        --light-fill: #{$blue-20};
-        --hover-fill: #{$blue-20};
-        --active-fill: #{$blue-10};
-        --text-color: #{$blue-90};
-
+        --light-fill: #{$cerulean-100};
+        --hover-fill: #{$cerulean-200};
+        --active-fill: #{$cerulean-100};
+        --text-color: #{$cerulean-900};
         --hover-decoration: underline;
     }
 
     &.ActionButton--donate {
-        --light-fill: #{rgba($vermillion, 0.15)};
-        --hover-fill: #{rgba(#f4a39f, 0.15)};
-        --active-fill: var(--hover-fill);
-        --text-color: #{$vermillion};
+        --light-fill: #{$auburn-100};
+        --hover-fill: #{$auburn-200};
+        --active-fill: #{$auburn-100};
+        --text-color: #{$auburn};
     }
 
     height: 100%;
-    border-radius: 4px;
+    border-radius: 0;
     position: relative;
+    transition: all 150ms ease;
 
     button,
     a {
@@ -59,24 +65,32 @@ div.ActionButton {
         align-items: center;
         gap: $paddingBetweenIconAndLabel;
         height: 100%;
-        width: 100%;
+        box-sizing: border-box;
         cursor: pointer;
         color: var(--text-color);
+        font-family: $sans-serif-font-stack;
         font-size: 13px;
         font-weight: 500;
+        line-height: 1;
         padding: 0 $paddingX;
         border-radius: inherit;
         background-color: var(--light-fill);
-        position: relative;
         letter-spacing: 0.01em;
+        text-transform: uppercase;
+        transition: all 150ms ease;
+        border: none;
+        outline: none;
+        text-decoration: none;
+        white-space: nowrap;
 
         svg {
             font-size: 12px;
+            transition: transform 150ms ease;
         }
 
         &.icon-only {
             justify-content: center;
-            padding: 0;
+            padding: 0 8px;
         }
 
         &:visited {
@@ -85,13 +99,18 @@ div.ActionButton {
 
         &:hover {
             background-color: var(--hover-fill);
-            text-decoration: var(--hover-decoration);
+            text-decoration: var(--hover-decoration, none);
         }
 
         &:active,
         &.active {
-            color: $active-text;
+            color: $cerulean-900;
             background-color: var(--active-fill);
         }
+
+        &:focus-visible {
+            outline: 2px solid $auburn;
+            outline-offset: 2px;
+        }
     }
 }