@buildcanada/charts 0.2.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buildcanada/charts",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "A configurable data visualization library for creating interactive charts.",
   "type": "module",
   "main": "src/index.ts",
@@ -54,6 +54,8 @@
     "react-dom": "^19.0.0"
   },
   "dependencies": {
+    "@buildcanada/colours": "workspace:*",
+    "@buildcanada/components": "workspace:*",
     "@fortawesome/fontawesome-svg-core": "^6.7.2",
     "@fortawesome/free-brands-svg-icons": "^6.7.2",
     "@fortawesome/free-solid-svg-icons": "^6.7.2",

package/src/components/Button/Button.scss

@@ -1,90 +1,188 @@
+/*******************************************************************************
+ * Charts Button Component
+ *
+ * Uses Build Canada design system styling with square corners and brand colors.
+ ******************************************************************************/
+
 .charts-btn {
     @include body-3-medium;
-    padding: 8.5px 24px;
-    border: 1px solid transparent;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 10px 24px;
+    border: 2px solid transparent;
     border-radius: 0;
     text-align: center;
-    display: block;
     cursor: pointer;
+    transition: all 150ms ease;
+    white-space: nowrap;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    font-weight: 500;
+
+    &:focus-visible {
+        outline: 2px solid $auburn;
+        outline-offset: 2px;
+    }
 
     &.charts-btn--icon-only {
-        padding: 4.5px 9px;
+        padding: 8px;
+        min-width: 40px;
+        min-height: 40px;
     }
 
-    &:disabled {
-        cursor: default;
-
-        &.charts-btn--solid-blue,
-        &.charts-btn--solid-dark-blue,
-        &.charts-btn--solid-light-blue,
-        &.charts-btn--solid-vermillion {
-            color: $blue-50;
-            background-color: $blue-10;
-        }
-
-        &.charts-btn--outline-vermillion,
-        &.charts-btn--outline-white {
-            color: $blue-40;
-            border-color: $blue-40;
-        }
+    svg {
+        font-size: 0.875em;
+        transition: transform 150ms ease;
     }
 
-    svg {
-        font-size: 0.75rem;
+    // Animated arrow on hover
+    &:hover:not(:disabled) svg.icon-right {
+        transform: translateX(4px);
     }
 }
 
+/*******************************************************************************
+ * Icon Position Modifiers
+ ******************************************************************************/
+
 .charts-btn--icon-right {
-    margin-left: 0.5rem;
+    margin-left: 8px;
 }
 
 .charts-btn--icon-left {
-    margin-right: 0.5rem;
+    margin-right: 8px;
 }
 
+/*******************************************************************************
+ * Solid Variants
+ ******************************************************************************/
+
+.charts-btn--solid-auburn,
 .charts-btn--solid-vermillion {
-    background-color: $vermillion;
-    color: #fff;
+    background-color: $auburn;
+    border-color: $auburn;
+    color: $white;
+
+    &:hover:not(:disabled) {
+        background-color: $auburn-600;
+        border-color: $auburn-600;
+    }
 
-    &:hover {
-        background-color: $accent-vermillion;
+    &:active:not(:disabled) {
+        background-color: $auburn-700;
+        border-color: $auburn-700;
     }
 }
 
-.charts-btn--outline-vermillion {
-    border-color: $vermillion;
-    color: $vermillion;
+.charts-btn--solid-charcoal {
+    background-color: $charcoal;
+    border-color: $charcoal;
+    color: $white;
 
-    &:hover {
-        border-color: $accent-vermillion;
-        color: $accent-vermillion;
+    &:hover:not(:disabled) {
+        background-color: $gray-70;
+        border-color: $gray-70;
+    }
+
+    &:active:not(:disabled) {
+        background-color: $gray-60;
+        border-color: $gray-60;
     }
 }
 
+.charts-btn--solid-cerulean,
 .charts-btn--solid-blue {
-    background-color: $blue-60;
-    color: #fff;
+    background-color: $cerulean-500;
+    border-color: $cerulean-500;
+    color: $white;
 
-    &:hover {
-        background-color: $blue-90;
+    &:hover:not(:disabled) {
+        background-color: $cerulean-600;
+        border-color: $cerulean-600;
+    }
+
+    &:active:not(:disabled) {
+        background-color: $cerulean-700;
+        border-color: $cerulean-700;
     }
 }
 
 .charts-btn--solid-dark-blue {
-    background-color: $blue-95;
-    color: #fff;
+    background-color: $cerulean-900;
+    border-color: $cerulean-900;
+    color: $white;
 
-    &:hover {
-        background-color: #164377;
+    &:hover:not(:disabled) {
+        background-color: $cerulean-950;
+        border-color: $cerulean-950;
     }
 }
 
 .charts-btn--solid-light-blue {
-    background-color: $blue-20;
-    color: $blue-90;
+    background-color: $cerulean-100;
+    border-color: $cerulean-100;
+    color: $cerulean-900;
+
+    &:hover:not(:disabled) {
+        background-color: $cerulean-200;
+        border-color: $cerulean-200;
+    }
+}
+
+.charts-btn--solid-linen {
+    background-color: $linen;
+    border-color: $linen;
+    color: $charcoal;
+
+    &:hover:not(:disabled) {
+        background-color: $gray-20;
+        border-color: $gray-20;
+    }
 
-    &:hover {
-        background-color: $blue-10;
+    &:active:not(:disabled) {
+        background-color: $gray-30;
+        border-color: $gray-30;
+    }
+}
+
+/*******************************************************************************
+ * Outline Variants
+ ******************************************************************************/
+
+.charts-btn--outline-auburn,
+.charts-btn--outline-vermillion {
+    background-color: transparent;
+    border-color: $auburn;
+    color: $auburn;
+
+    &:hover:not(:disabled) {
+        background-color: $auburn;
+        color: $white;
+    }
+
+    &:active:not(:disabled) {
+        background-color: $auburn-600;
+        border-color: $auburn-600;
+        color: $white;
+    }
+}
+
+.charts-btn--outline-charcoal {
+    background-color: transparent;
+    border-color: $charcoal;
+    color: $charcoal;
+
+    &:hover:not(:disabled) {
+        background-color: $charcoal;
+        color: $white;
+    }
+
+    &:active:not(:disabled) {
+        background-color: $gray-70;
+        border-color: $gray-70;
+        color: $white;
     }
 }
 
@@ -93,18 +191,41 @@
     border-color: $white;
     color: $white;
 
-    &:hover {
+    &:hover:not(:disabled) {
         background-color: $white;
-        color: $blue-90;
+        color: $charcoal;
+    }
+
+    &:active:not(:disabled) {
+        background-color: $gray-10;
+        border-color: $gray-10;
+        color: $charcoal;
     }
 }
 
+.charts-btn--outline-cerulean,
 .charts-btn--outline-light-blue {
-    border-color: $blue-20;
-    color: $blue-90;
+    background-color: transparent;
+    border-color: $cerulean-500;
+    color: $cerulean-700;
 
-    &:hover {
-        background-color: $white;
-        color: $blue-90;
+    &:hover:not(:disabled) {
+        background-color: $cerulean-500;
+        color: $white;
+    }
+
+    &:active:not(:disabled) {
+        background-color: $cerulean-600;
+        border-color: $cerulean-600;
+        color: $white;
     }
 }
+
+/*******************************************************************************
+ * Disabled State
+ ******************************************************************************/
+
+.charts-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}

package/src/components/Checkbox.scss

@@ -1,14 +1,23 @@
+/*******************************************************************************
+ * Checkbox
+ *
+ * Custom checkbox styling.
+ * Uses Build Canada design system colors.
+ ******************************************************************************/
+
 .checkbox {
-    $checkbox-size: 16px;
+    $checkbox-size: 18px;
 
     $light-stroke: $gray-30;
-    $hover-stroke: $blue-30;
-    $active-fill: $blue-30;
+    $hover-stroke: $auburn-500;
+    $active-fill: $auburn-500;
 
     position: relative;
+    display: flex;
+    align-items: flex-start;
 
     label {
-        margin: 0; // style leak in admin
+        margin: 0;
     }
 
     input {
@@ -27,28 +36,29 @@
         width: $checkbox-size;
         height: $checkbox-size;
 
-        background: white;
+        background: $white;
         pointer-events: none;
-        border-radius: 2px;
-        border: 1px solid $light-stroke;
-        color: #fff;
+        border-radius: 0;
+        border: 2px solid $light-stroke;
+        color: $white;
 
         display: flex;
         align-items: center;
         justify-content: center;
+        transition: all 150ms ease;
 
         svg {
             font-size: 10px;
-            padding-left: 0.75px;
         }
     }
 
     input:focus-visible + .custom {
-        outline: 2px solid $controls-color;
+        outline: 2px solid $auburn;
+        outline-offset: 2px;
     }
 
     input:active + .custom {
-        background: $active-fill;
+        background: $auburn-100;
     }
 
     input:checked + .custom {
@@ -57,36 +67,38 @@
     }
 
     input:checked:active + .custom {
-        background: white;
+        background: $auburn-600;
+        border-color: $auburn-600;
     }
 
     input:disabled {
         + .custom {
-            background: $blue-10;
-            border-color: $blue-20;
-            color: $blue-50;
+            background: $gray-10;
+            border-color: $gray-20;
+            color: $gray-50;
         }
 
         &:active + .custom {
-            background: $blue-10;
+            background: $gray-10;
         }
 
         ~ .label {
-            color: $blue-50;
+            color: $gray-50;
             cursor: not-allowed;
         }
     }
 
     .label {
         @include grapher_label-2-regular;
-        padding-left: $checkbox-size + 8px;
+        padding-left: $checkbox-size + 10px;
         cursor: pointer;
         user-select: none;
-        color: $dark-text;
+        color: $charcoal;
+        line-height: $checkbox-size;
     }
 
     &:hover {
-        input:not(:checked) + .custom {
+        input:not(:checked):not(:disabled) + .custom {
             border-color: $hover-stroke;
         }
     }

package/src/components/LabeledSwitch/LabeledSwitch.scss

@@ -1,20 +1,26 @@
+/*******************************************************************************
+ * Labeled Switch
+ *
+ * Toggle switch with label.
+ * Uses Build Canada design system colors.
+ ******************************************************************************/
+
 @use "sass:color";
 
 $light-fill: $gray-30;
-$active-fill: $blue-20;
-
-$active-switch: $blue-50;
-
+$active-fill: $cerulean-100;
+$active-switch: $cerulean-500;
 $medium: 400;
 $lato: $sans-serif-font-stack;
 
-// on/off switch with label written to the right
+// On/off switch with label written to the right
 .labeled-switch {
-    // keep in sync with TableFilterToggle.tsx
+    // Keep in sync with TableFilterToggle.tsx
     // where the width of a labeled switch is calculated
 
     display: flex;
-    color: $gray-70;
+    align-items: center;
+    color: $gray-60;
     font: $medium 13px/16px $lato;
     letter-spacing: 0.01em;
 
@@ -24,23 +30,20 @@ $lato: $sans-serif-font-stack;
     user-select: none;
 
     label {
-        color: $gray-80;
-        padding-left: 35px;
+        color: $charcoal;
+        padding-left: 40px;
         white-space: nowrap;
-
-        &:hover {
-            cursor: pointer;
-        }
+        cursor: pointer;
 
         svg {
-            color: $gray-60;
+            color: $gray-50;
             height: 13px;
             padding: 0 0.333em;
         }
     }
 
     .labeled-switch-subtitle {
-        // only show subtitle in settings menu, otherwise use icon + tooltip
+        // Only show subtitle in settings menu, otherwise use icon + tooltip
         display: none;
     }
 
@@ -48,61 +51,71 @@ $lato: $sans-serif-font-stack;
         position: absolute;
         opacity: 0;
         left: 0;
+        cursor: pointer;
     }
 
     .outer {
         position: absolute;
         left: 0;
-        top: 0;
+        top: 50%;
+        transform: translateY(-50%);
         content: " ";
-        width: 29px;
-        height: 16px;
+        width: 32px;
+        height: 18px;
         background: $light-fill;
-        border-radius: 8px;
+        border-radius: 9px;
         pointer-events: none;
+        transition: background 200ms ease;
+
         .inner {
             position: relative;
             content: " ";
-            width: 10px;
-            height: 10px;
-            background: $gray-70;
-            border-radius: 5px;
+            width: 12px;
+            height: 12px;
+            background: $gray-60;
+            border-radius: 50%;
             top: 3px;
             left: 3px;
             pointer-events: none;
-            transition: transform 333ms;
+            transition: transform 200ms ease, background 200ms ease;
         }
     }
 
     &:hover {
         .outer .inner {
-            background: $gray-80;
+            background: $charcoal;
         }
     }
 
     input:focus-visible + .outer {
-        outline: 2px solid $controls-color;
+        outline: 2px solid $auburn;
+        outline-offset: 2px;
     }
 
     input:checked + .outer {
         background: $active-fill;
+
         .inner {
             background: $active-switch;
-            transform: translate(13px, 0);
+            transform: translate(14px, 0);
         }
     }
+
     &:hover input:checked + .outer .inner {
-        background: color.adjust($active-switch, $lightness: -13%);
+        background: $cerulean-600;
     }
 
     &.labeled-switch--is-disabled {
         opacity: 0.5;
+        cursor: not-allowed;
+
         label {
-            cursor: default;
+            cursor: not-allowed;
         }
+
         &:hover {
             .inner {
-                background: $gray-70;
+                background: $gray-60;
             }
         }
     }

package/src/components/RadioButton.scss

@@ -1,16 +1,25 @@
+/*******************************************************************************
+ * Radio Button
+ *
+ * Custom radio button styling.
+ * Uses Build Canada design system colors.
+ ******************************************************************************/
+
 @use "sass:math";
 
 .radio {
-    $radio-size: 16px;
+    $radio-size: 18px;
 
     $light-stroke: $gray-30;
-    $hover-stroke: $blue-30;
-    $active-fill: $blue-50;
+    $hover-stroke: $cerulean-500;
+    $active-fill: $cerulean-500;
 
     position: relative;
+    display: flex;
+    align-items: flex-start;
 
     label {
-        margin: 0; // style leak in admin
+        margin: 0;
         cursor: pointer;
     }
 
@@ -28,37 +37,48 @@
         width: $radio-size;
         height: $radio-size;
 
-        background: white;
+        background: $white;
         pointer-events: none;
         border-radius: 50%;
-        border: 1px solid $light-stroke;
+        border: 2px solid $light-stroke;
 
         display: flex;
         align-items: center;
         justify-content: center;
+        transition: all 150ms ease;
 
         .inner {
             width: math.div($radio-size, 2);
             height: math.div($radio-size, 2);
             background-color: $active-fill;
             border-radius: 50%;
+            opacity: 0;
+            transform: scale(0);
+            transition: all 150ms ease;
         }
     }
 
     input:focus-visible + .outer {
-        outline: 2px solid $controls-color;
+        outline: 2px solid $auburn;
+        outline-offset: 2px;
     }
 
     input:checked + .outer {
         border-color: $hover-stroke;
+
+        .inner {
+            opacity: 1;
+            transform: scale(1);
+        }
     }
 
     .label {
         @include grapher_label-2-regular;
-        padding-left: $radio-size + 8px;
+        padding-left: $radio-size + 10px;
         cursor: pointer;
         user-select: none;
-        color: $dark-text;
+        color: $charcoal;
+        line-height: $radio-size;
     }
 
     &:hover {

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 {