Skip to content

Commit 89db485

Browse files
anton-bcgovanton-bcgov
authored
Merge pull request #774 from bcgov/anton/design-tokens-upadte
chore: `@bcgov/design-tokens` version upgrade, css variables cleanup
2 parents 08b0a84 + 7ead379 commit 89db485

File tree

30 files changed

+153
-239
lines changed

30 files changed

+153
-239
lines changed

‎cats-frontend/package-lock.json‎

Lines changed: 5 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎cats-frontend/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
"dependencies": {
1414
"@apollo/client": "^3.7.0",
1515
"@bcgov/bc-sans": "^2.1.0",
16-
"@bcgov/design-tokens": "^2.0.1",
16+
"@bcgov/design-tokens": "3.2.0",
1717
"@emotion/react": "^11.10.4",
1818
"@emotion/styled": "^11.10.4",
1919
"@mui/material": "^6.4.1",

‎cats-frontend/src/App.css‎

Lines changed: 3 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -67,9 +67,9 @@
6767
transition: width 0.9s ease; /* Smooth transition for width */
6868
height: 100%; /* Ensure full height of the sidebar */
6969
cursor: pointer;
70-
background: var(--side-bar-background-color);
71-
box-shadow: var(--side-bar-shadow);
72-
border-right: 1px solid var(--surface-border-light, #d8d8d8);
70+
background: var(--surface-color-secondary-default);
71+
box-shadow: 0px 3.2px 7.2px 0px rgba(0, 0, 0, 0.13);
72+
border-right: 1px solid var(--surface-color-border-default, #d8d8d8);
7373
/* min-width: 84px; */
7474
max-width: 240px;
7575
}
@@ -109,69 +109,3 @@
109109
width: 240px;
110110
}
111111
}
112-
113-
:root {
114-
--layout-margin-xsmall: 4px;
115-
--layout-margin-small: 8px;
116-
--layout-margin-medium: 16px;
117-
--layout-margin-large: 24px;
118-
--layout-margin-xlarge: 32px;
119-
--layout-margin-xxlarge: 40px;
120-
--layout-margin-huge: 56px;
121-
--layout-padding-xsmall: 4px;
122-
--layout-padding-small: 8px;
123-
--layout-padding-medium: 16px;
124-
--layout-padding-large: 24px;
125-
--layout-border-radius-medium: 4px;
126-
127-
--header-height: 64px;
128-
--footer-height: 64px;
129-
130-
--surface-color-primary-active-border: #2e5dd7;
131-
--surface-color-primary-default: #053662;
132-
--surface-color-primary-hover: #1e5189;
133-
--surface-color-secondary-hover: #edebe9;
134-
--surface-color-background-white: #ffffff;
135-
--surface-color-background-light: #faf9f8;
136-
--surface-color-border-light: #d8d8d8;
137-
--surface-color-border-hover: #b8b8b8;
138-
--surface-color-border-medium: #898785;
139-
--surface-color-border-dark: #353433;
140-
--surface-color-brand-gray-10: #faf9f8;
141-
--surface-color-brand-gray-20: #f3f2f1;
142-
--surface-color-brand-gray-30: #eceae8;
143-
--surface-color-brand-gray-60: #c6c5c3;
144-
--surface-color-brand-gray-80: #605e5c;
145-
--surface-color-brand-gray-white: #fff;
146-
--surface-color-brand-gold-50: #fcc85d;
147-
--surface-color-brand-gold-60: #f8ba47;
148-
--surface-color-brand-blue-20: #d8eafd;
149-
--surface-color-brand-blue-70: #5595d9;
150-
--surface-color-brand-blue-100: #053662;
151-
152-
--support-border-color-success: #42814a;
153-
--support-surface-color-info: #f7f9fc;
154-
--support-border-color-info: #053662;
155-
156-
--icons-color-primary: #2d2d2d;
157-
--icons-color-secondary: #474543;
158-
--icons-color-info: #053662;
159-
--icons-color-success: #42814a;
160-
--icons-color-disabled: #9f9d9c;
161-
162-
--typography-color-primary: #2d2d2d;
163-
--typography-color-primary-invert: #fff;
164-
--typography-color-secondary: #474543;
165-
--typography-color-link: #255a90;
166-
--typography-color-disabled: #9f9d9c;
167-
168-
--box-shadow-small:
169-
0 0.6px 1.8px 0 rgba(0, 0, 0, 0.1), 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.13);
170-
171-
--map-button-height-large: 64px;
172-
--map-button-height-medium: 40px;
173-
--map-button-padding-large: 16px 24px;
174-
--map-button-padding-medium: 8px 16px;
175-
--map-button-font-size-large: 18px;
176-
--map-button-font-size-medium: 16px;
177-
}

‎cats-frontend/src/app/components/account/UserAccount.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@
1717

1818
.account-custom-menu {
1919
height: 231px;
20-
border-radius: var(--surface-border-radius-medium) !important;
20+
border-radius: var(--layout-border-radius-medium) !important;
2121
padding: var(--layout-padding-medium) 0px var(--layout-padding-medium) 0px !important;
22-
background-color: var(--surface-background-white) !important;
22+
background-color: var(--surface-color-background-white) !important;
2323
box-shadow: var(--surface-shadow-medium);
2424
inset: 16px 0px auto auto !important;
2525
border: none !important;
@@ -28,7 +28,7 @@
2828

2929
.account-custom-item-first {
3030
padding: 0px var(--layout-margin-medium) 16px var(--layout-margin-medium) !important;
31-
border-bottom: 1px solid var(--surface-color-border-light, #d8d8d8) !important;
31+
border-bottom: 1px solid var(--surface-color-border-default, #d8d8d8) !important;
3232
}
3333

3434
.account-custom-label {
@@ -53,7 +53,7 @@
5353
padding: var(--layout-padding-medium) 0px var(--layout-padding-medium) 0px !important;
5454
}
5555
.account-custom-item:hover {
56-
background-color: var(--surface-secondary-hover) !important;
56+
background-color: var(--surface-color-secondary-hover) !important;
5757
color: var(--typography-color-secondary) !important;
5858
}
5959

‎cats-frontend/src/app/components/action/Actions.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.custom-action-menu {
2-
border-radius: var(--surface-border-radius-medium) !important;
2+
border-radius: var(--layout-border-radius-medium) !important;
33
padding: var(--layout-padding-medium) 0px var(--layout-padding-medium) 0px !important;
4-
background-color: var(--surface-background-white) !important;
4+
background-color: var(--surface-color-background-white) !important;
55
box-shadow: var(--surface-shadow-medium);
66
border: none !important;
77
/* width: 17rem; */

‎cats-frontend/src/app/components/avatar/Avatar.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
border-radius: 100px;
33
height: 44px;
44
width: 44px;
5-
border: 1px solid var(--surface-border-light, #d8d8d8);
5+
border: 1px solid var(--surface-color-border-default, #d8d8d8);
66
background: var(--surface-brand-blue-10, #f1f8fe);
77
}
88

‎cats-frontend/src/app/components/banners/banner.css‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -56,18 +56,18 @@
5656
}
5757

5858
.message-current {
59-
background-color: var(--support-support-surface-color-success);
60-
border: 1px solid var(--surface-support-border-color-success);
59+
background-color: var(--support-surface-color-success);
60+
border: 1px solid var(--support-border-color-success);
6161
}
6262

6363
.message-outdated {
64-
background-color: var(--support-support-surface-color-danger);
65-
border: 1px solid var(--surface-support-border-color-danger);
64+
background-color: var(--support-surface-color-danger);
65+
border: 1px solid var(--support-border-color-danger);
6666
}
6767

6868
.message-pending {
69-
background-color: var(--support-support-surface-color-warning);
70-
border: 1px solid var(--surface-support-border-color-warning);
69+
background-color: var(--support-surface-color-warning);
70+
border: 1px solid var(--support-border-color-warning);
7171
}
7272

7373
.icon {
@@ -77,15 +77,15 @@
7777
}
7878

7979
.icon-current {
80-
color: var(--surface-icons-success);
80+
color: var(--icons-color-success);
8181
}
8282

8383
.icon-pending {
84-
color: var(--surface-icons-warning);
84+
color: var(--icons-color-warning);
8585
}
8686

8787
.icon-outdated {
88-
color: var(--surface-icons-danger);
88+
color: var(--icons-color-danger);
8989
}
9090

9191
.hidden {

‎cats-frontend/src/app/components/button/Button.css‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.SITE-Button {
22
border: none;
3-
border-radius: var(--surface-border-radius-medium);
3+
border-radius: var(--layout-border-radius-medium);
44
cursor: pointer;
55
display: inline-flex;
66
align-items: center;
@@ -14,7 +14,8 @@
1414
cursor: not-allowed;
1515
}
1616
.SITE-Button:focus:not(:focus-visible) {
17-
outline: solid var(--layout-border-width-medium) var(--surface-primary-active);
17+
outline: solid var(--layout-border-width-medium)
18+
var(--surface-color-border-active);
1819
}
1920

2021
/* Sizes */
@@ -32,14 +33,14 @@
3233

3334
/* Variant - Primary */
3435
.SITE-Button.primary {
35-
background: var(--surface-primary-default);
36-
border: 1px solid var(--surface-primary-default);
36+
background: var(--surface-color-primary-default);
37+
border: 1px solid var(--surface-color-primary-default);
3738
color: var(--typography-color-primary-invert);
3839
}
3940
.SITE-Button.primary:disabled {
40-
background-color: var(--surface-primary-disabled);
41+
background-color: var(--surface-color-primary-disabled);
4142
color: var(--typography-color-disabled);
42-
border-color: var(--surface-primary-disabled);
43+
border-color: var(--surface-color-primary-disabled);
4344
}
4445
.SITE-Button.primary:hover:not(:disabled) {
4546
background-color: var(--surface-color-primary-hover);
@@ -50,43 +51,43 @@
5051

5152
/* Variant - Secondary */
5253
.SITE-Button.secondary {
53-
background-color: var(--surface-secondary-default);
54-
border: 1px solid var(--surface-border-dark);
54+
background-color: var(--surface-color-secondary-default);
55+
border: 1px solid var(--surface-color-border-dark);
5556
color: var(--typography-color-primary);
5657
}
5758
.SITE-Button.secondary:disabled {
58-
background-color: var(--surface-secondary-disabled);
59-
border-color: var(--surface-secondary-disabled);
59+
background-color: var(--surface-color-secondary-disabled);
60+
border-color: var(--surface-color-secondary-disabled);
6061
color: var(--typography-color-disabled);
6162
}
6263
.SITE-Button.secondary:hover:not(:disabled) {
63-
background-color: var(--surface-secondary-hover);
64+
background-color: var(--surface-color-secondary-hover);
6465
}
6566

6667
/* Variant - Tertiary */
6768
.SITE-Button.tertiary {
68-
background-color: var(--surface-color-default);
69+
background-color: var(--surface-color-tertiary-default);
6970
color: var(--typography-color-primary);
7071
}
7172
.SITE-Button.tertiary:disabled {
72-
background-color: var(--surface-tertiary-default);
73+
background-color: var(--surface-color-tertiary-disabled);
7374
color: var(--typography-color-disabled);
7475
}
7576
.SITE-Button.tertiary:hover:not(:disabled) {
76-
background-color: var(--surface-tertiary-hover);
77+
background-color: var(--surface-color-tertiary-hover);
7778
}
7879

7980
.SITE-Button.btn-icon {
8081
background: transparent;
8182
border: 1px solid transparent;
82-
color: var(--surface-primary-default);
83+
color: var(--surface-color-primary-default);
8384
}
8485
.SITE-Button.btn-icon:hover:not(:disabled) {
85-
background-color: var(--surface-color-brand-blue-20);
86+
background-color: var(--theme-blue-20);
8687
}
8788
.SITE-Button.btn-icon:focus {
88-
background-color: var(--surface-color-brand-blue-20);
89-
border: 1px solid var(--surface-color-primary-active-border);
89+
background-color: var(--theme-blue-20);
90+
border: 1px solid var(--surface-color-border-active);
9091
}
9192
.SITE-Button.btn-icon.btn-active {
9293
background: var(--surface-color-primary-default);

‎cats-frontend/src/app/components/drawer/Drawer.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
border-top: none;
88
position: absolute;
9-
background-color: var(--surface-color-background-light);
9+
background-color: var(--surface-color-background-light-gray);
1010
box-shadow: var(--surface-shadow-medium);
1111
overflow-y: hidden;
1212
}
@@ -17,7 +17,7 @@
1717
justify-content: space-between;
1818
align-items: center;
1919
padding: var(--layout-padding-large);
20-
border-bottom: 1px solid var(--surface-color-border-light);
20+
border-bottom: 1px solid var(--surface-color-border-default);
2121

2222
font-size: var(--typography-font-size-body);
2323
font-weight: var(--typography-font-weights-bold);
@@ -27,7 +27,7 @@
2727
width: 40px;
2828
height: 4px;
2929
border-radius: 8px;
30-
background-color: var(--surface-color-brand-gray-60);
30+
background-color: var(--theme-gray-60);
3131
position: absolute;
3232
top: 6px;
3333
left: calc(50% - 20px);

0 commit comments

Comments
 (0)