Skip to content

Commit 951bb2c

Browse files
AliKdhim87Robbert
AliKdhim87
authored and
Robbert
committed
fix: align the flo-legal style with Figma
1 parent e7b59b3 commit 951bb2c

File tree

9 files changed

+381
-107
lines changed

9 files changed

+381
-107
lines changed

‎.changeset/sixty-worms-roll.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@utrecht/flolegal-decision-tree-css": patch
3+
"@utrecht/design-tokens": patch
4+
---
5+
6+
Align the flo-legal style with Figma

‎components/flo-legal-decision-tree/package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,11 @@
1717
},
1818
"devDependencies": {
1919
"@utrecht/build-utils-css": "workspace:*",
20+
"@utrecht/button-css": "workspace:*",
2021
"@utrecht/custom-checkbox-css": "workspace:*",
21-
"@utrecht/focus-ring-css": "workspace:*"
22+
"@utrecht/focus-ring-css": "workspace:*",
23+
"@utrecht/link-css": "workspace:*",
24+
"@utrecht/select-css": "workspace:*"
2225
},
2326
"keywords": [
2427
"nl-design-system"

‎components/flo-legal-decision-tree/src/_mixin.scss‎

Lines changed: 58 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -11,20 +11,29 @@
1111
}
1212

1313
@mixin utrecht-flo-decision-question-description {
14+
--utrecht-form-fieldset-legend-margin-block-start: 0;
15+
1416
align-items: center;
17+
column-gap: var(--utrecht-flo-decision-question-description-column-gap);
1518
display: flex;
16-
gap: var(--utrecht-flo-decision-question-description-gap, 12px);
1719
inline-size: fit-content;
1820
}
21+
@mixin utrecht-flo-decision-form-button {
22+
--utrecht-button-primary-action-disabled-color: var(--utrecht-flo-decision-form-button-disabled-color);
23+
}
24+
25+
@mixin utrecht-flo-decision-form-nav {
26+
background-color: var(--utrecht-flo-decision-form-nav-background-color, inherit);
27+
display: grid;
28+
padding-block: var(--utrecht-flo-decision-form-nav-padding-block);
29+
padding-inline: 0;
30+
}
1931

2032
@mixin utrecht-flo-decision-explanation-button {
21-
--utrecht-button-border-color: var(
22-
--utrecht-flo-decision-explanation-button-border-color,
23-
var(--utrecht-color-black)
24-
);
33+
--utrecht-button-border-color: var(--utrecht-flo-decision-explanation-button-border-color);
2534
--utrecht-button-margin-block-start: 0;
2635
--utrecht-button-margin-block-end: 0;
27-
--utrecht-button-background-color: var(--utrecht-flo-decision-explanation-button-background-color, transparent);
36+
--utrecht-button-background-color: var(--utrecht-flo-decision-explanation-button-background-color);
2837
}
2938
@mixin utrecht-flo-decision-question-container {
3039
align-items: baseline;
@@ -33,60 +42,63 @@
3342
}
3443

3544
@mixin utrecht-flo-decision-question-answers-option {
45+
column-gap: var(--utrecht-flo-decision-question-answers-option-column-gap);
46+
display: inline-flex;
3647
padding-inline-start: 0;
3748
}
3849

3950
@mixin utrecht-flo-decision-question-answers {
4051
display: grid;
41-
gap: var(--utrecht-flo-decision-question-answer-gap, 8px);
4252
inline-size: 100%;
53+
row-gap: var(--utrecht-flo-decision-question-answer-row-gap);
4354
}
4455

4556
@mixin utrecht-flo-decision-boolean-false {
4657
margin-inline-start: 0;
4758
}
4859

4960
@mixin utrecht-flo-decision-question-section {
50-
background-color: var(--utrecht-flo-decision-question-section-background-color, var(--utrecht-color-green-90));
51-
border-block-end-color: var(
52-
--utrecht-flo-decision-question-section-border-block-end-color,
53-
var(--utrecht-color-green-50)
54-
);
55-
border-block-end-style: solid;
56-
border-block-end-width: var(--utrecht-flo-decision-question-section-border-block-end-width, 3px);
57-
padding-block-end: var(--utrecht-flo-decision-question-section-padding-block-end, 24px);
61+
background-color: var(--utrecht-flo-decision-question-section-background-color);
62+
border-block-color: var(--utrecht-flo-decision-question-section-border-block-color);
63+
border-block-style: solid;
64+
border-block-width: var(--utrecht-flo-decision-question-section-border-block-width);
65+
padding-block-end: var(--utrecht-flo-decision-question-section-padding-block-end);
66+
padding-block-start: var(--utrecht-flo-decision-question-section-padding-block-start);
5867
}
5968

6069
@mixin utrecht-flo-decision-explanation-container {
61-
background-color: var(--utrecht-flo-decision-explanation-container-background-color, #fff);
62-
inline-size: 100%;
70+
background-color: var(--utrecht-flo-decision-explanation-container-background-color, inherit);
6371
margin-block-end: 0;
72+
margin-block-start: var(--utrecht-flo-decision-explanation-container-margin-block-start);
73+
max-inline-size: 100%;
6474
}
6575

6676
@mixin utrecht-flo-decision-outcomes-container {
67-
background-color: var(--utrecht-flo-decision-outcomes-container-background-color, #fff);
68-
margin-block-start: var(--utrecht-flo-decision-outcomes-container-margin-block-start, 24px);
77+
background-color: var(--utrecht-flo-decision-outcomes-container-background-color);
78+
margin-block-start: var(--utrecht-flo-decision-outcomes-container-margin-block-start);
79+
padding-block: var(--utrecht-flo-decision-outcomes-container-padding-block);
80+
padding-inline: var(--utrecht-flo-decision-outcomes-container-padding-inline);
6981
}
7082

7183
@mixin utrecht-flo-decision-form {
72-
background-color: var(--utrecht-flo-decision-background-color, #e6edde);
73-
margin-block-end: var(--utrecht-flo-decision-margin-block-end, 8px);
74-
margin-block-start: var(--utrecht-flo-decision-margin-block-start, 8px);
75-
padding-block: var(--utrecht-flo-decision-padding-block, 12px);
76-
padding-inline: var(--utrecht-flo-decision-padding-inline, 16px);
84+
background-color: var(--utrecht-flo-decision-form-background-color);
85+
margin-block-end: var(--utrecht-flo-decision-form-margin-block-end);
86+
margin-block-start: var(--utrecht-flo-decision-form-margin-block-start);
87+
padding-block: var(--utrecht-flo-decision-form-padding-block);
88+
padding-inline: var(--utrecht-flo-decision-form-padding-inline);
7789
}
7890

7991
@mixin utrecht-flo-decision-explanation {
80-
margin-block-start: var(--utrecht-flo-decision-explanation-margin-block-start, 24px);
81-
margin-inline-start: var(--utrecht-flo-decision-explanation-margin-inline-start, 0);
92+
margin-block-start: var(--utrecht-flo-decision-explanation-margin-block-start);
93+
margin-inline-start: var(--utrecht-flo-decision-explanation-margin-inline-start);
8294
}
8395

8496
@mixin utrecht-flo-decision-explanation-wrapper {
8597
display: grid;
8698
}
8799

88100
@mixin utrecht-flo-decision-explanation-button--close {
89-
margin-block-end: var(--utrecht-flo-decision-explanation-button-close-margin-block-end, 12px);
101+
margin-block-end: var(--utrecht-flo-decision-explanation-button-close-margin-block-end);
90102
margin-inline-start: auto;
91103
position: relative;
92104
}
@@ -96,10 +108,26 @@
96108
}
97109

98110
@mixin utrecht-flo-decision-label {
99-
display: flex;
111+
display: inline-flex;
100112
}
101113

102114
@mixin utrecht-flo-decision-label--checkbox {
103-
gap: var(--utrecht-flo-decision-label-checkbox-gap, 8px);
104-
margin-block-start: var(--utrecht-flo-decision-label-checkbox-margin-block-start, 12px);
115+
column-gap: var(--utrecht-flo-decision-label-checkbox-column-gap);
116+
margin-block-start: var(--utrecht-flo-decision-label-checkbox-margin-block-start);
117+
}
118+
119+
@mixin utrecht-button-icon {
120+
background-color: var(--utrecht-button-icon-color, currentColor);
121+
block-size: 1em;
122+
content: "";
123+
display: inline-block;
124+
inline-size: 1em;
125+
mask-image: var(--utrecht-button-icon);
126+
mask-position: center;
127+
mask-repeat: no-repeat;
128+
mask-size: contain;
129+
}
130+
131+
@mixin utrecht-button-icon--forced-colors {
132+
--utrecht-button-icon-color: CanvasText;
105133
}

‎components/flo-legal-decision-tree/src/index.scss‎

Lines changed: 76 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,11 @@
44
* Copyright (c) 2021-2025 Gemeente Utrecht
55
*/
66

7+
@use "~@utrecht/button-css/src/mixin" as *;
78
@use "~@utrecht/form-label-css/src/mixin" as *;
89
@use "~@utrecht/custom-checkbox-css/src/mixin" as *;
10+
@use "~@utrecht/select-css/src/mixin" as *;
11+
@use "~@utrecht/link-css/src/mixin" as *;
912
@use "./mixin" as *;
1013

1114
/**
@@ -14,9 +17,64 @@
1417
* This allows Utrecht Design System styles to override the default Flo client styles.
1518
*/
1619
.utrecht-flolegal-decision-tree-container {
20+
.flo-nav .flo-form-button.flo-inner-visibility-hidden {
21+
display: none !important;
22+
}
23+
24+
.flo-nav .flo-form-button.flo-form-button-next {
25+
@include utrecht-button;
26+
@include utrecht-button-appearance-properties("utrecht-button", "primary-action");
27+
28+
--utrecht-button-icon: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%208%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1%2014c-.26%200-.51-.1-.71-.29a.996.996%200%200%201%200-1.41l5.29-5.29-5.29-5.3C-.1%201.32-.1.68.29.29s1.03-.39%201.42%200l6%206c.39.39.39%201.02%200%201.41l-6%206.01c-.2.2-.45.29-.71.29%22%2F%3E%3C%2Fsvg%3E");
29+
30+
&::after {
31+
@include utrecht-button-icon;
32+
}
33+
34+
&:hover {
35+
@include utrecht-button--hover;
36+
}
37+
38+
&:disabled:hover {
39+
@include utrecht-button--disabled;
40+
}
41+
42+
@media (forced-colors: active) {
43+
@include utrecht-button-icon--forced-colors;
44+
}
45+
}
46+
47+
.flo-nav .flo-form-button.flo-form-button-previous {
48+
@include utrecht-button;
49+
@include utrecht-button-appearance-properties("utrecht-button", "subtle");
50+
51+
--utrecht-button-icon: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%208%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M7%2014c-.26%200-.51-.1-.71-.29l-6-6a.996.996%200%200%201%200-1.41l6-6.01A.996.996%200%201%201%207.7%201.7L2.41%207l5.29%205.29a.996.996%200%200%201-.71%201.7Z%22%2F%3E%3C%2Fsvg%3E");
52+
53+
&::before {
54+
@include utrecht-button-icon;
55+
}
56+
57+
// disabled hover style based on Rene feedback
58+
@media (forced-colors: active) {
59+
@include utrecht-button-icon--forced-colors;
60+
}
61+
}
62+
63+
.flo-nav .flo-form-button:disabled {
64+
@include utrecht-button--disabled;
65+
@include utrecht-flo-decision-form-button;
66+
}
67+
68+
.flo-nav {
69+
@include utrecht-flo-decision-form-nav;
70+
}
71+
1772
.flo-question-container {
1873
@include utrecht-flo-decision-question-container;
74+
75+
background-color: var(--utrecht-flo-decision-form-background-color);
1976
}
77+
2078
.flo-question-description-container {
2179
@include utrecht-flo-decision-question-description-container;
2280
}
@@ -36,15 +94,25 @@
3694
.flo-question-answers {
3795
@include utrecht-flo-decision-question-answers;
3896
}
39-
97+
.flo-question-answers select {
98+
@include utrecht-select;
99+
@include utrecht-select--html-select;
100+
@include utrecht-select--not-multiple;
101+
}
40102
label.flo-boolean-false {
41103
@include utrecht-flo-decision-boolean-false;
42104
}
43-
.flo-decision-list .flo-question-section {
105+
.flo-embed-container .flo-question-section {
44106
@include utrecht-flo-decision-question-section;
45107
}
46108

109+
.flo-decision-list > :first-child {
110+
--utrecht-flo-decision-question-section-padding-block-start: 0;
111+
}
112+
47113
.flo-decision-list > :last-child .flo-question-section {
114+
--utrecht-flo-decision-question-section-padding-block-end: 0;
115+
48116
border: none;
49117
}
50118

@@ -57,7 +125,7 @@
57125
@include utrecht-flo-decision-label--checkbox;
58126
}
59127

60-
.flo-decision-list .flo-question-section .flo-explanation-container {
128+
.flo-explanation-container {
61129
@include utrecht-flo-decision-explanation-container;
62130
}
63131

@@ -88,4 +156,9 @@
88156
.flo-question-answers .flo-question-answers-option label {
89157
@include utrecht-flo-decision-label;
90158
}
159+
160+
.flo-embed-container a {
161+
@include utrecht-link;
162+
@include utrecht-link--html-a;
163+
}
91164
}

0 commit comments

Comments
 (0)
⚡