Skip to content

Commit 4d42392

Browse files
github-actions[bot]github-actions[bot]
authored
Merge release/2.3.0 into main branch (#1081)
* Use modal backdrop z index on drawer backdrop (#1063) * use Inter font (#1062) * FormGroup - update helper text, focus states (#1066) * remove window from Avatar classname (#1068) * add border to Card under Synthesized class (#1071) * Add Synthesis colors from Figma (#1069) * add pointer to CheckboxButton and RadioButton (#1074) * update Button to use Synthesis colors (#1076) * Implements Synthesis styles for tabs component (#1077) * Implements Synthesis styles for Select component (#1079) * Synthesize Alert / Toast colors (#1080)
1 parent 487a9dc commit 4d42392

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

59 files changed

+1117
-614
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@user-interviews/ui-design-system",
3-
"version": "2.2.3",
3+
"version": "2.3.0",
44
"dependencies": {
55
"@tiptap/core": "^2.0.3",
66
"@tiptap/extension-bold": "^2.0.3",

‎scss/baseline.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
@import './typography';
33

44
body {
5-
font-family: $font-family;
6-
font-size: $font-size-base;
5+
font-family: $synth-font-family;
6+
font-size: $synth-font-size-base;
77
color: $ux-gray-900;
88
}

‎scss/buttons.scss‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@
1818
}
1919
}
2020

21+
$synthesis-primary: $synth-primary-cta-blue;
22+
2123
$primary: $ux-emerald-600;
2224
$danger: $ux-red;
2325
$warning: $ux-yellow-400;
@@ -74,6 +76,42 @@ $warning: $ux-yellow-400;
7476
}
7577
}
7678

79+
@mixin synthesis-btn-primary {
80+
$btn-primary-background: $synthesis-primary;
81+
$btn-primary-border: $synthesis-primary;
82+
$btn-primary-color: $ux-white;
83+
84+
$btn-primary-hover-background: $synth-dark-background-selected-blue;
85+
$btn-primary-hover-border: $synth-dark-background-selected-blue;
86+
$btn-primary-hover-color: $ux-white;
87+
88+
$btn-primary-active-background: $synth-dark-background-pressed-blue;
89+
$btn-primary-active-border: $synth-dark-background-pressed-blue;
90+
$btn-primary-active-color: $ux-white;
91+
92+
@include button-variant(
93+
$btn-primary-background,
94+
$btn-primary-border,
95+
$btn-primary-color,
96+
97+
$btn-primary-hover-background,
98+
$btn-primary-hover-border,
99+
$btn-primary-hover-color,
100+
101+
$btn-primary-active-background,
102+
$btn-primary-active-border,
103+
$btn-primary-active-color,
104+
);
105+
106+
&:focus-visible {
107+
@include btn-focus-outline;
108+
}
109+
110+
&:active, &:focus {
111+
@include btn-remove-bootstrap-focus-outline;
112+
}
113+
}
114+
77115
@mixin btn-outline-primary {
78116
$btn-outline-primary-color: $primary;
79117
$btn-outline-primary-color-hover: $ux-white;
@@ -111,6 +149,43 @@ $warning: $ux-yellow-400;
111149
}
112150
}
113151

152+
@mixin synthesis-btn-outline-primary {
153+
$btn-outline-primary-color: $synthesis-primary;
154+
$btn-outline-primary-color-hover: $ux-white;
155+
156+
$btn-outline-primary-hover-background: $synth-dark-background-selected-blue;
157+
$btn-outline-primary-hover-border: $synth-dark-background-selected-blue;
158+
$btn-outline-primary-hover-color: $ux-white;
159+
160+
$btn-outline-primary-border: $synthesis-primary;
161+
162+
$btn-outline-primary-active-background: $synth-dark-background-pressed-blue;
163+
$btn-outline-primary-active-border-color: $synth-dark-background-pressed-blue;
164+
165+
@include button-outline-variant(
166+
$btn-outline-primary-color,
167+
$btn-outline-primary-color-hover,
168+
169+
$btn-outline-primary-hover-background,
170+
$btn-outline-primary-hover-border,
171+
$btn-outline-primary-hover-color,
172+
);
173+
border-color: $btn-outline-primary-border;
174+
175+
&:active {
176+
background-color: $btn-outline-primary-active-background;
177+
border-color: $btn-outline-primary-active-border-color;
178+
}
179+
180+
&:focus-visible {
181+
@include btn-focus-outline;
182+
}
183+
184+
&:active, &:focus {
185+
@include btn-remove-bootstrap-focus-outline;
186+
}
187+
}
188+
114189
@mixin btn-danger {
115190
$btn-danger-background: $danger;
116191
$btn-danger-border: $danger;

‎scss/colors.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,4 @@
22
@import './colors/inputs';
33
@import './colors/mod_rainbow';
44
@import './colors/palette';
5+
@import './colors/synthesis-palette';

‎scss/colors/synthesis-palette.scss‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
// stoplight color system
2+
$synth-success-green-dark: #015029;
3+
$synth-success-green-medium: #09914f;
4+
$synth-success-green-light: #d4f6e5;
5+
6+
$synth-error-red-dark: #c71f1f;
7+
$synth-error-red-medium: #e03131;
8+
$synth-error-red-light: #fae1e1;
9+
10+
$synth-warning-amber-dark: #fbda36;
11+
$synth-warning-amber-medium: #ffe356;
12+
$synth-warning-amber-light: #fff1ab;
13+
$synth-warning-amber-alternate: #f59c27;
14+
15+
// neutrals
16+
$synth-alert-bg-neutral: #f4f4f4;
17+
$synth-div-stroke-neutral: #dedede;
18+
$synth-header-neutral: #fbfbfb;
19+
$synth-page-neutral: #fdfdfd;
20+
$synth-text-neutral: #1b1b1b;
21+
$synth-unselected-neutral: #5b5b5b;
22+
23+
// main schema - visual hierarchy
24+
$synth-accent-green: #158d71;
25+
$synth-dark-background-selected-blue: #162c4e;
26+
$synth-dark-background-pressed-blue: #010812;
27+
$synth-hover-state: #eef9f6;
28+
$synth-indicator-stroke-green: #91cabb;
29+
$synth-navbar-blue: #010812;
30+
$synth-primary-cta-blue: #162c4e;
31+
$synth-selected-state-green: #c6e2db;
32+
33+
// feedback and signifier colors
34+
$synth-hyperlink-color: #3f6dca;
35+
36+
$synth-hover-blue: #e5ecff;
37+
$synth-header-gray-blue: #eef2f8;

‎scss/forms/form_control_label.scss‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,29 +3,28 @@
33
@import '../typography';
44

55
.FormControlLabel {
6-
@include font-type-30;
6+
@include synth-font-type-30;
77
align-items: center;
88
color: $ux-gray-900;
99
display: flex;
1010
margin-bottom: 0.5rem;
1111

1212
&--with-children {
13-
@include font-type-30--medium;
13+
@include synth-font-type-30--medium;
1414

1515
align-items: flex-start;
1616
flex-direction: column;
1717
display: flex;
1818
}
1919

2020
&__label {
21-
align-items: flex-start;
21+
align-items: center;
2222
display: flex;
2323
flex-direction: row;
2424
}
2525

2626
&__helper-text {
27-
@include font-type-30--medium;
28-
font-weight: 100;
27+
@include synth-font-type-10--uppercase;
2928
}
3029

3130
&__control {
@@ -34,7 +33,7 @@
3433
}
3534

3635
&__children {
37-
@include font-type-30--medium;
36+
@include synth-font-type-30--medium;
3837

3938
font-weight: 100;
4039
margin-top: 0.5rem;

‎scss/forms/form_group.scss‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,11 @@
1515
padding: 1rem;
1616

1717
.InputLabel {
18-
@include font-type-30--bold;
18+
@include synth-font-type-30--bold;
1919
margin-bottom: 0.5rem;
2020

2121
&__helper-text {
22-
@include font-type-30;
22+
@include synth-font-type-30;
2323
font-weight: 100;
2424
color: $ux-gray-900;
2525
}
@@ -57,19 +57,17 @@
5757
}
5858

5959
&__helper-text {
60-
@include font-type-20--medium;
61-
font-weight: 100;
60+
@include synth-font-type-20;
6261
color: $ux-gray-900;
63-
padding: .375rem 0;
64-
margin: 0;
62+
margin: 0 0 0.75rem;
6563

6664
&--pre {
6765
white-space: pre-wrap;
6866
}
6967
}
7068

7169
&__invalid-feedback {
72-
@include font-type-20--medium;
70+
@include synth-font-type-20--medium;
7371
color: $ux-red;
7472
padding: .375rem 0;
7573
margin: 0;
@@ -80,12 +78,12 @@
8078
}
8179

8280
.form-control {
83-
@include font-type-30;
81+
@include synth-font-type-30;
8482
height: 2.25rem;
8583
}
8684

8785
textarea.form-control {
88-
@include font-type-30;
86+
@include synth-font-type-30;
8987
height: auto;
9088
}
9189

‎scss/forms/input_label.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@
22
@import '../typography';
33

44
.InputLabel, .InputLegend {
5-
@include font-type-30--bold;
5+
@include synth-font-type-30--bold;
66
display: flex;
7+
align-items: center;
78
flex-wrap: wrap;
89
margin-bottom: 0.375rem;
910

1011
&__helper-text {
11-
@include font-type-30--medium;
12-
font-weight: 100;
12+
@include synth-font-type-10--uppercase;
1313
color: $ux-gray-900;
1414
}
1515
}

‎scss/global.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');
1+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
22
@import './theme';
33
@import './baseline';

‎scss/inputs.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
$input-box-shadow: inset 0px 2px 2px rgba(225, 228, 232, 0.65);
2-
$input-focus-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.075);
2+
$input-focus-box-shadow: none;

0 commit comments

Comments
 (0)