Skip to content

Commit e0476db

Browse files
hagenekhagenek
authored
Merge pull request #2507 from SpareBank1/feat/semantiske-buttons
FFE-Buttons oppdatert til å ha semantiske farger
2 parents 4bc5ed2 + 5e085dc commit e0476db

File tree

3 files changed

+368
-141
lines changed

3 files changed

+368
-141
lines changed

‎packages/ffe-buttons/less/base-button.less

+122-63
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
appearance: none;
66
border: 2px solid transparent;
77
border-radius: var(--ffe-v-buttons-border-radius);
8-
color: var(--ffe-farge-hvit);
8+
color: var(--ffe-color-component-button-primary-foreground-default);
99
cursor: pointer;
1010
display: flex;
1111
font-family: var(--ffe-g-font);
@@ -30,7 +30,7 @@
3030
background: transparent;
3131
border-radius: 1.5rem;
3232
inset: -5px;
33-
box-shadow: 0 0 0 2px var(--ffe-v-button-shadow-color);
33+
box-shadow: 0 0 0 2px var(--ffe-color-border-interactive-focus);
3434
transition: opacity var(--ffe-transition-duration) var(--ffe-ease);
3535
}
3636

@@ -50,10 +50,13 @@
5050

5151
&:active {
5252
transform: scale(0.97);
53+
background-color: var(
54+
--ffe-color-component-button-primary-fill-pressed
55+
);
5356
}
5457

5558
&:visited {
56-
color: var(--ffe-v-button-text-color);
59+
color: var(--ffe-color-component-button-primary-foreground-default);
5760
}
5861

5962
@media (min-width: @breakpoint-sm) {
@@ -67,55 +70,64 @@
6770
}
6871

6972
.ffe-button--action {
70-
--background-color: var(--ffe-v-button-action-color);
71-
--color: var(--ffe-v-button-action-color-text);
72-
73-
background-color: var(--background-color);
74-
color: var(--color);
73+
background-color: var(--ffe-color-component-button-action-fill-default);
74+
color: var(--ffe-color-default-neutral-inverted);
75+
border: none;
7576

7677
:where(.ffe-button__icon) {
77-
color: var(--color);
78+
color: var(--ffe-color-default-neutral-inverted);
7879
}
7980

80-
&:focus {
81-
--background-color: var(--ffe-v-button-action-color);
81+
&:active {
82+
transform: scale(0.97);
83+
background-color: var(--ffe-color-default-feedback-success-strongest);
8284
}
8385

8486
@media (hover: hover) and (pointer: fine) {
85-
&:hover {
86-
--background-color: var(--ffe-v-button-action-color-hover);
87+
&:hover:not(:active):not(.ffe-button--pressed) {
88+
background-color: var(
89+
--ffe-color-default-feedback-success-stronger
90+
);
8791
}
8892
}
8993
}
9094

9195
.ffe-button--primary {
92-
--background-color: var(--ffe-v-button-primary-color);
93-
--color: var(--ffe-v-button-primary-color-text);
96+
--background-color: var(--ffe-color-component-button-primary-fill-default);
97+
--text-color: var(--ffe-color-component-button-primary-foreground-default);
9498

9599
background-color: var(--background-color);
96-
color: var(--color);
100+
color: var(--text-color);
97101

98102
:where(.ffe-button__icon) {
99-
color: var(--color);
103+
color: var(--text-color);
100104
}
101105

102-
&:focus {
103-
--background-color: var(--ffe-v-button-primary-color);
106+
&:active {
107+
transform: scale(0.97);
108+
--background-color: var(
109+
--ffe-color-component-button-primary-fill-pressed
110+
);
104111
}
105112

106113
@media (hover: hover) and (pointer: fine) {
107114
&:hover {
108-
--background-color: var(--ffe-v-button-primary-color-hover);
115+
--background-color: var(
116+
--ffe-color-component-button-primary-fill-hover
117+
);
109118
}
110119
}
111120
}
112121

113122
.ffe-button--secondary,
114-
.ffe-button--shortcut,
115123
.ffe-button--expand {
116-
--background-color: var(--ffe-v-button-secondary-color);
117-
--border-color: var(--ffe-v-button-secondary-border-color);
118-
--text-color: var(--ffe-v-button-secondary-color-text);
124+
--background-color: var(
125+
--ffe-color-component-button-secondary-fill-default
126+
);
127+
--border-color: var(--ffe-color-component-button-secondary-border-default);
128+
--text-color: var(
129+
--ffe-color-component-button-secondary-foreground-default
130+
);
119131

120132
background-color: var(--background-color);
121133
border: solid 2px var(--border-color);
@@ -124,40 +136,80 @@
124136
:where(.ffe-button__label, .ffe-button__icon) {
125137
color: var(--text-color);
126138
}
127-
&:active,
128-
&:focus,
129-
&:visited {
130-
color: var(--ffe-v-button-secondary-color-text);
131-
}
132139

133140
@media (hover: hover) and (pointer: fine) {
134141
&:hover {
135-
--background-color: var(--ffe-v-button-secondary-color-bg-hover);
136-
--border-color: var(--ffe-v-button-secondary-color-bg-hover);
137-
--text-color: var(--ffe-v-button-secondary-color-text-hover);
142+
--background-color: var(
143+
--ffe-color-component-button-secondary-fill-hover
144+
);
145+
--border-color: var(
146+
--ffe-color-component-button-secondary-border-hover
147+
);
148+
--text-color: var(
149+
--ffe-color-component-button-secondary-foreground-hover
150+
);
138151
}
139152
}
153+
154+
&:focus,
155+
&:visited {
156+
color: var(--ffe-color-component-button-secondary-foreground-default);
157+
background-color: var(
158+
--ffe-color-component-button-secondary-fill-hover
159+
);
160+
}
161+
162+
&:active {
163+
transform: scale(0.97);
164+
background-color: var(
165+
--ffe-color-component-button-secondary-fill-pressed
166+
);
167+
border-color: var(
168+
--ffe-color-component-button-secondary-border-pressed
169+
);
170+
color: var(--ffe-color-component-button-secondary-foreground-hover);
171+
}
140172
}
141173

142174
.ffe-button--shortcut {
143-
&:focus {
144-
transform: translateX(12px);
145-
}
175+
background-color: var(--ffe-color-component-button-secondary-fill-default);
176+
border: solid 2px var(--ffe-color-component-button-secondary-border-default);
177+
color: var(--ffe-color-component-button-secondary-foreground-default);
146178

147179
.ffe-button__icon {
148-
transition: all var(--ffe-transition-duration) var(--ffe-ease);
149-
will-change: transform;
180+
color: var(--ffe-color-component-button-secondary-foreground-default);
150181
}
151182

152183
@media (hover: hover) and (pointer: fine) {
153-
&:hover .ffe-button__icon {
154-
transform: translateX(12px);
184+
&:hover {
185+
background-color: var(
186+
--ffe-color-component-button-secondary-fill-hover
187+
);
188+
color: var(--ffe-color-component-button-secondary-foreground-hover);
189+
190+
.ffe-button__icon {
191+
color: var(
192+
--ffe-color-component-button-secondary-foreground-hover
193+
);
194+
}
155195
}
156196
}
157-
}
158197

159-
.ffe-button--expand {
160-
border-radius: 34px;
198+
&:active {
199+
transform: scale(0.97);
200+
background-color: var(
201+
--ffe-color-component-button-secondary-fill-pressed
202+
);
203+
color: var(--ffe-color-component-button-secondary-foreground-hover);
204+
205+
.ffe-button__icon {
206+
color: var(--ffe-color-component-button-secondary-foreground-hover);
207+
}
208+
}
209+
210+
&:focus {
211+
transform: translateX(12px);
212+
}
161213
}
162214

163215
.ffe-button--expanded {
@@ -166,13 +218,11 @@
166218
}
167219

168220
.ffe-button--task {
169-
--icon-color: var(--ffe-v-button-task-color-icon);
170-
--text-color: var(--ffe-v-button-task-color-text);
171-
--border-color: transparent;
221+
--text-color: var(--ffe-color-foreground-emphasis);
172222

173223
background: transparent;
174224
border-radius: 1.75rem;
175-
border: 2px solid var(--border-color);
225+
border: none;
176226
box-shadow: none;
177227
color: var(--text-color);
178228
display: inline-block;
@@ -183,12 +233,12 @@
183233
width: auto;
184234

185235
:where(.ffe-button__icon) {
186-
--border-color: var(--ffe-v-button-task-color-border);
187-
--background-color: var(--ffe-v-button-task-color);
188-
--color: var(--icon-color);
236+
--icon-border-color: var(--ffe-color-foreground-emphasis);
237+
--icon-background-color: transparent;
238+
--icon-color: var(--ffe-color-foreground-emphasis);
189239

190-
border: 2px solid var(--border-color);
191-
background-color: var(--background-color);
240+
border: 2px solid var(--icon-border-color);
241+
background-color: var(--icon-background-color);
192242
border-radius: 50%;
193243
height: 45px;
194244
width: 45px;
@@ -199,28 +249,37 @@
199249
transition: all var(--ffe-transition-duration) var(--ffe-ease);
200250

201251
:where(.ffe-icons) {
202-
color: var(--color);
252+
color: var(--icon-color);
203253
}
204254
}
205255

206-
@media (hover: hover) and (pointer: fine) {
207-
&:hover .ffe-button__icon {
208-
--background-color: var(--ffe-v-button-task-color-hover);
209-
--border-color: var(--ffe-v-button-task-color-border-hover);
210-
--icon-color: var(--ffe-v-button-task-color-icon-hover);
256+
&:focus {
257+
&::after {
258+
box-shadow: 0 0 0 2px var(--ffe-color-border-interactive-focus);
211259
}
212260
}
213261

214-
&:focus {
215-
--border-color: var(--ffe-v-button-task-border-focus);
262+
&:active {
263+
transform: scale(0.97);
264+
background-color: transparent;
216265

217-
&::after {
218-
display: none;
266+
.ffe-button__icon {
267+
background-color: var(
268+
--ffe-color-component-button-secondary-fill-pressed
269+
);
270+
--icon-border-color: var(--ffe-color-foreground-emphasis);
219271
}
220272
}
221273

222-
&:focus:not(:focus-visible) {
223-
--border-color: transparent;
274+
@media (hover: hover) and (pointer: fine) {
275+
&:hover {
276+
.ffe-button__icon {
277+
--icon-background-color: var(
278+
--ffe-color-component-button-secondary-fill-hover
279+
);
280+
--icon-border-color: var(--ffe-color-foreground-emphasis);
281+
}
282+
}
224283
}
225284
}
226285

0 commit comments

Comments
 (0)