Skip to content

Commit a8208b5

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 a8208b5

File tree

28 files changed

+1003
-751
lines changed

28 files changed

+1003
-751
lines changed

‎packages/charts/package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@buildcanada/charts",
3-
"version": "0.2.2",
3+
"version": "0.3.0",
44
"description": "A configurable data visualization library for creating interactive charts.",
55
"type": "module",
66
"main": "src/index.ts",
@@ -54,6 +54,8 @@
5454
"react-dom": "^19.0.0"
5555
},
5656
"dependencies": {
57+
"@buildcanada/colours": "workspace:*",
58+
"@buildcanada/components": "workspace:*",
5759
"@fortawesome/fontawesome-svg-core": "^6.7.2",
5860
"@fortawesome/free-brands-svg-icons": "^6.7.2",
5961
"@fortawesome/free-solid-svg-icons": "^6.7.2",

‎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+
}

0 commit comments

Comments
 (0)