Skip to content

Commit 5359537

Browse files
xrendanclaude
xrendan
and
claude
committed
Integrate Build Canada design system
- Add Build Canada color palette (linen, auburn, cerulean, charcoal, etc.) - Update typography to use Geist Sans and Inter font stacks - Restyle buttons, tabs, timeline, controls with new design tokens - Remove border-radius from popups, tooltips, and modals - Simplify ActionButtons to use CSS-only layout instead of JS width calculations - Simplify NoDataModal to plain text on linen background - Update Footer to use fixed estimates instead of ActionButtons width Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
1 parent 8eb1848 commit 5359537

File tree

24 files changed

+993
-747
lines changed

24 files changed

+993
-747
lines changed

‎packages/charts/src/components/Button/Button.scss‎

Lines changed: 174 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,90 +1,188 @@
1+
/*******************************************************************************
2+
* Charts Button Component
3+
*
4+
* Uses Build Canada design system styling with square corners and brand colors.
5+
******************************************************************************/
6+
17
.charts-btn {
28
@include body-3-medium;
3-
padding: 8.5px 24px;
4-
border: 1px solid transparent;
9+
display: inline-flex;
10+
align-items: center;
11+
justify-content: center;
12+
gap: 8px;
13+
padding: 10px 24px;
14+
border: 2px solid transparent;
515
border-radius: 0;
616
text-align: center;
7-
display: block;
817
cursor: pointer;
18+
transition: all 150ms ease;
19+
white-space: nowrap;
20+
text-transform: uppercase;
21+
letter-spacing: 0.05em;
22+
font-weight: 500;
23+
24+
&:focus-visible {
25+
outline: 2px solid $auburn;
26+
outline-offset: 2px;
27+
}
928

1029
&.charts-btn--icon-only {
11-
padding: 4.5px 9px;
30+
padding: 8px;
31+
min-width: 40px;
32+
min-height: 40px;
1233
}
1334

14-
&:disabled {
15-
cursor: default;
16-
17-
&.charts-btn--solid-blue,
18-
&.charts-btn--solid-dark-blue,
19-
&.charts-btn--solid-light-blue,
20-
&.charts-btn--solid-vermillion {
21-
color: $blue-50;
22-
background-color: $blue-10;
23-
}
24-
25-
&.charts-btn--outline-vermillion,
26-
&.charts-btn--outline-white {
27-
color: $blue-40;
28-
border-color: $blue-40;
29-
}
35+
svg {
36+
font-size: 0.875em;
37+
transition: transform 150ms ease;
3038
}
3139

32-
svg {
33-
font-size: 0.75rem;
40+
// Animated arrow on hover
41+
&:hover:not(:disabled) svg.icon-right {
42+
transform: translateX(4px);
3443
}
3544
}
3645

46+
/*******************************************************************************
47+
* Icon Position Modifiers
48+
******************************************************************************/
49+
3750
.charts-btn--icon-right {
38-
margin-left: 0.5rem;
51+
margin-left: 8px;
3952
}
4053

4154
.charts-btn--icon-left {
42-
margin-right: 0.5rem;
55+
margin-right: 8px;
4356
}
4457

58+
/*******************************************************************************
59+
* Solid Variants
60+
******************************************************************************/
61+
62+
.charts-btn--solid-auburn,
4563
.charts-btn--solid-vermillion {
46-
background-color: $vermillion;
47-
color: #fff;
64+
background-color: $auburn;
65+
border-color: $auburn;
66+
color: $white;
67+
68+
&:hover:not(:disabled) {
69+
background-color: $auburn-600;
70+
border-color: $auburn-600;
71+
}
4872

49-
&:hover {
50-
background-color: $accent-vermillion;
73+
&:active:not(:disabled) {
74+
background-color: $auburn-700;
75+
border-color: $auburn-700;
5176
}
5277
}
5378

54-
.charts-btn--outline-vermillion {
55-
border-color: $vermillion;
56-
color: $vermillion;
79+
.charts-btn--solid-charcoal {
80+
background-color: $charcoal;
81+
border-color: $charcoal;
82+
color: $white;
5783

58-
&:hover {
59-
border-color: $accent-vermillion;
60-
color: $accent-vermillion;
84+
&:hover:not(:disabled) {
85+
background-color: $gray-70;
86+
border-color: $gray-70;
87+
}
88+
89+
&:active:not(:disabled) {
90+
background-color: $gray-60;
91+
border-color: $gray-60;
6192
}
6293
}
6394

95+
.charts-btn--solid-cerulean,
6496
.charts-btn--solid-blue {
65-
background-color: $blue-60;
66-
color: #fff;
97+
background-color: $cerulean-500;
98+
border-color: $cerulean-500;
99+
color: $white;
67100

68-
&:hover {
69-
background-color: $blue-90;
101+
&:hover:not(:disabled) {
102+
background-color: $cerulean-600;
103+
border-color: $cerulean-600;
104+
}
105+
106+
&:active:not(:disabled) {
107+
background-color: $cerulean-700;
108+
border-color: $cerulean-700;
70109
}
71110
}
72111

73112
.charts-btn--solid-dark-blue {
74-
background-color: $blue-95;
75-
color: #fff;
113+
background-color: $cerulean-900;
114+
border-color: $cerulean-900;
115+
color: $white;
76116

77-
&:hover {
78-
background-color: #164377;
117+
&:hover:not(:disabled) {
118+
background-color: $cerulean-950;
119+
border-color: $cerulean-950;
79120
}
80121
}
81122

82123
.charts-btn--solid-light-blue {
83-
background-color: $blue-20;
84-
color: $blue-90;
124+
background-color: $cerulean-100;
125+
border-color: $cerulean-100;
126+
color: $cerulean-900;
127+
128+
&:hover:not(:disabled) {
129+
background-color: $cerulean-200;
130+
border-color: $cerulean-200;
131+
}
132+
}
133+
134+
.charts-btn--solid-linen {
135+
background-color: $linen;
136+
border-color: $linen;
137+
color: $charcoal;
138+
139+
&:hover:not(:disabled) {
140+
background-color: $gray-20;
141+
border-color: $gray-20;
142+
}
85143

86-
&:hover {
87-
background-color: $blue-10;
144+
&:active:not(:disabled) {
145+
background-color: $gray-30;
146+
border-color: $gray-30;
147+
}
148+
}
149+
150+
/*******************************************************************************
151+
* Outline Variants
152+
******************************************************************************/
153+
154+
.charts-btn--outline-auburn,
155+
.charts-btn--outline-vermillion {
156+
background-color: transparent;
157+
border-color: $auburn;
158+
color: $auburn;
159+
160+
&:hover:not(:disabled) {
161+
background-color: $auburn;
162+
color: $white;
163+
}
164+
165+
&:active:not(:disabled) {
166+
background-color: $auburn-600;
167+
border-color: $auburn-600;
168+
color: $white;
169+
}
170+
}
171+
172+
.charts-btn--outline-charcoal {
173+
background-color: transparent;
174+
border-color: $charcoal;
175+
color: $charcoal;
176+
177+
&:hover:not(:disabled) {
178+
background-color: $charcoal;
179+
color: $white;
180+
}
181+
182+
&:active:not(:disabled) {
183+
background-color: $gray-70;
184+
border-color: $gray-70;
185+
color: $white;
88186
}
89187
}
90188

@@ -93,18 +191,41 @@
93191
border-color: $white;
94192
color: $white;
95193

96-
&:hover {
194+
&:hover:not(:disabled) {
97195
background-color: $white;
98-
color: $blue-90;
196+
color: $charcoal;
197+
}
198+
199+
&:active:not(:disabled) {
200+
background-color: $gray-10;
201+
border-color: $gray-10;
202+
color: $charcoal;
99203
}
100204
}
101205

206+
.charts-btn--outline-cerulean,
102207
.charts-btn--outline-light-blue {
103-
border-color: $blue-20;
104-
color: $blue-90;
208+
background-color: transparent;
209+
border-color: $cerulean-500;
210+
color: $cerulean-700;
105211

106-
&:hover {
107-
background-color: $white;
108-
color: $blue-90;
212+
&:hover:not(:disabled) {
213+
background-color: $cerulean-500;
214+
color: $white;
215+
}
216+
217+
&:active:not(:disabled) {
218+
background-color: $cerulean-600;
219+
border-color: $cerulean-600;
220+
color: $white;
109221
}
110222
}
223+
224+
/*******************************************************************************
225+
* Disabled State
226+
******************************************************************************/
227+
228+
.charts-btn:disabled {
229+
opacity: 0.5;
230+
cursor: not-allowed;
231+
}

‎packages/charts/src/components/Checkbox.scss‎

Lines changed: 32 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,23 @@
1+
/*******************************************************************************
2+
* Checkbox
3+
*
4+
* Custom checkbox styling.
5+
* Uses Build Canada design system colors.
6+
******************************************************************************/
7+
18
.checkbox {
2-
$checkbox-size: 16px;
9+
$checkbox-size: 18px;
310

411
$light-stroke: $gray-30;
5-
$hover-stroke: $blue-30;
6-
$active-fill: $blue-30;
12+
$hover-stroke: $cerulean-500;
13+
$active-fill: $cerulean-500;
714

815
position: relative;
16+
display: flex;
17+
align-items: flex-start;
918

1019
label {
11-
margin: 0; // style leak in admin
20+
margin: 0;
1221
}
1322

1423
input {
@@ -27,28 +36,29 @@
2736
width: $checkbox-size;
2837
height: $checkbox-size;
2938

30-
background: white;
39+
background: $white;
3140
pointer-events: none;
32-
border-radius: 2px;
33-
border: 1px solid $light-stroke;
34-
color: #fff;
41+
border-radius: 0;
42+
border: 2px solid $light-stroke;
43+
color: $white;
3544

3645
display: flex;
3746
align-items: center;
3847
justify-content: center;
48+
transition: all 150ms ease;
3949

4050
svg {
4151
font-size: 10px;
42-
padding-left: 0.75px;
4352
}
4453
}
4554

4655
input:focus-visible + .custom {
47-
outline: 2px solid $controls-color;
56+
outline: 2px solid $auburn;
57+
outline-offset: 2px;
4858
}
4959

5060
input:active + .custom {
51-
background: $active-fill;
61+
background: $cerulean-100;
5262
}
5363

5464
input:checked + .custom {
@@ -57,36 +67,38 @@
5767
}
5868

5969
input:checked:active + .custom {
60-
background: white;
70+
background: $cerulean-600;
71+
border-color: $cerulean-600;
6172
}
6273

6374
input:disabled {
6475
+ .custom {
65-
background: $blue-10;
66-
border-color: $blue-20;
67-
color: $blue-50;
76+
background: $gray-10;
77+
border-color: $gray-20;
78+
color: $gray-50;
6879
}
6980

7081
&:active + .custom {
71-
background: $blue-10;
82+
background: $gray-10;
7283
}
7384

7485
~ .label {
75-
color: $blue-50;
86+
color: $gray-50;
7687
cursor: not-allowed;
7788
}
7889
}
7990

8091
.label {
8192
@include grapher_label-2-regular;
82-
padding-left: $checkbox-size + 8px;
93+
padding-left: $checkbox-size + 10px;
8394
cursor: pointer;
8495
user-select: none;
85-
color: $dark-text;
96+
color: $charcoal;
97+
line-height: $checkbox-size;
8698
}
8799

88100
&:hover {
89-
input:not(:checked) + .custom {
101+
input:not(:checked):not(:disabled) + .custom {
90102
border-color: $hover-stroke;
91103
}
92104
}

0 commit comments

Comments
 (0)