@sb1/ffe-buttons 15.1.7 → 16.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/less/base-button.less +29 -111
  2. package/less/buttons.less +1 -0
  3. package/less/inline-base-button.less +11 -43
  4. package/less/theme.less +55 -0
  5. package/package.json +5 -5
package/less/base-button.less CHANGED
@@ -46,11 +46,11 @@
46
46
  align-items: center;
47
47
  appearance: none;
48
48
  border: 2px solid transparent;
49
- border-radius: 6em;
49
+ border-radius: var(--ffe-v-buttons-border-radius);
50
50
  color: @ffe-farge-hvit;
51
51
  cursor: pointer;
52
52
  display: flex;
53
- font-family: 'SpareBank1-regular', 'MuseoSans-500', arial, sans-serif;
53
+ font-family: var(--ffe-g-font);
54
54
  justify-content: center;
55
55
  line-height: 24px;
56
56
  overflow: hidden;
@@ -62,7 +62,7 @@
62
62
  user-select: none;
63
63
  white-space: nowrap;
64
64
  width: 100%;
65
- .ffe-fontsize-button();
65
+ font-size: var(--ffe-fontsize-button);
66
66
 
67
67
  &::after {
68
68
  content: '';
@@ -102,7 +102,7 @@
102
102
  }
103
103
 
104
104
  &:visited {
105
- color: @ffe-white;
105
+ color: @ffe-farge-hvit;
106
106
  }
107
107
 
108
108
  @media (min-width: @breakpoint-sm) {
@@ -112,113 +112,61 @@
112
112
  }
113
113
 
114
114
  .ffe-button--action {
115
- background-color: @ffe-farge-nordlys-wcag;
115
+ background-color: var(--ffe-v-button-action-color);
116
+ color: var(--ffe-v-button-text-color);
116
117
 
117
118
  .native & {
118
119
  @media (prefers-color-scheme: dark) {
119
- background-color: @ffe-farge-nordlys;
120
120
  border: 2px solid transparent;
121
- color: @ffe-farge-svart;
122
121
  }
123
122
  }
124
123
  &:focus {
125
- background-color: @ffe-farge-nordlys-wcag;
126
-
127
- .native & {
128
- @media (prefers-color-scheme: dark) {
129
- background-color: @ffe-farge-nordlys;
130
- }
131
- }
124
+ background-color: var(--ffe-v-button-action-color);
132
125
  }
133
126
 
134
127
  &:hover {
135
- background-color: @ffe-farge-skog;
136
- .native & {
137
- @media (prefers-color-scheme: dark) {
138
- background-color: @ffe-farge-nordlys-30;
139
- }
140
- }
128
+ background-color: var(--ffe-v-button-action-color-hover);
141
129
  }
142
130
  }
143
131
 
144
132
  .ffe-button--primary {
145
- background-color: @ffe-farge-vann;
146
- .native & {
147
- @media (prefers-color-scheme: dark) {
148
- background-color: @ffe-farge-vann-70;
149
- color: @ffe-farge-svart;
150
- }
151
- }
133
+ background-color: var(--ffe-v-button-primary-color);
134
+ color: var(--ffe-v-button-text-color);
152
135
 
153
136
  &:focus {
154
- background-color: @ffe-farge-vann;
155
-
156
- .native & {
157
- @media (prefers-color-scheme: dark) {
158
- background-color: @ffe-farge-vann-70;
159
- }
160
- }
137
+ background-color: var(--ffe-v-button-primary-color);
161
138
  }
162
139
 
163
140
  &:hover {
164
- background-color: @ffe-farge-fjell;
165
- .native & {
166
- @media (prefers-color-scheme: dark) {
167
- background-color: @ffe-farge-vann-30;
168
- }
169
- }
141
+ background-color: var(--ffe-v-button-primary-color-hover);
170
142
  }
171
143
  }
172
144
 
173
145
  .ffe-button--secondary,
174
146
  .ffe-button--shortcut,
175
147
  .ffe-button--expand {
176
- background-color: @ffe-farge-hvit;
177
- border: solid 2px @ffe-farge-vann;
178
- color: @ffe-farge-vann;
179
- .native & {
180
- @media (prefers-color-scheme: dark) {
181
- color: @ffe-farge-vann-30;
182
- background-color: @ffe-farge-svart;
183
- border-color: @ffe-farge-vann-70;
184
- }
185
- }
148
+ background-color: var(--ffe-v-button-secondary-color-bg);
149
+ border: solid 2px var(--ffe-v-button-secondary-color);
150
+ color: var(--ffe-v-button-secondary-color);
186
151
 
187
152
  &:active,
188
153
  &:focus,
189
154
  &:visited {
190
- color: @ffe-farge-vann;
191
-
192
- .native & {
193
- @media (prefers-color-scheme: dark) {
194
- background-color: transparent;
195
- color: @ffe-farge-vann-30;
196
- }
197
- }
155
+ color: var(--ffe-v-button-secondary-color);
198
156
  }
199
157
 
200
158
  &:focus {
201
159
  .native & {
202
160
  @media (prefers-color-scheme: dark) {
203
161
  background-color: transparent;
204
- border-color: @ffe-farge-vann-70;
205
- color: @ffe-farge-vann-30;
206
162
  }
207
163
  }
208
164
  }
209
165
 
210
166
  &:hover {
211
- background-color: @ffe-farge-vann;
212
- border-color: @ffe-farge-vann;
213
- color: @ffe-farge-hvit;
214
-
215
- .native & {
216
- @media (prefers-color-scheme: dark) {
217
- background-color: @ffe-farge-vann-70;
218
- border-color: @ffe-farge-vann-70;
219
- color: @ffe-farge-svart;
220
- }
221
- }
167
+ background-color: var(--ffe-v-button-secondary-color);
168
+ border-color: var(--ffe-v-button-secondary-color);
169
+ color: var(--ffe-v-button-secondary-color-bg);
222
170
  }
223
171
  }
224
172
 
@@ -237,37 +185,20 @@
237
185
  border-radius: 1.75rem;
238
186
  border: 2px solid transparent;
239
187
  box-shadow: none;
240
- color: @ffe-farge-vann;
188
+ color: var(--ffe-v-button-task-primary-color);
241
189
  display: inline-block;
242
190
  padding: @ffe-spacing-2xs @ffe-spacing-sm @ffe-spacing-2xs @ffe-spacing-2xs;
243
191
  text-align: left;
244
192
  transition: all @ffe-transition-duration @ffe-ease;
245
193
  width: auto;
246
- .native & {
247
- @media (prefers-color-scheme: dark) {
248
- color: @ffe-farge-vann-30;
249
- }
250
- }
251
194
 
252
195
  &:hover {
253
- color: @ffe-farge-fjell;
196
+ color: var(--ffe-v-button-task-text-color-hover);
254
197
  box-shadow: none;
255
-
256
- .native & {
257
- @media (prefers-color-scheme: dark) {
258
- color: @ffe-farge-hvit;
259
- }
260
- }
261
198
  }
262
199
 
263
200
  &:focus {
264
- border-color: @ffe-farge-vann;
265
-
266
- .native & {
267
- @media (prefers-color-scheme: dark) {
268
- border-color: @ffe-farge-hvit;
269
- }
270
- }
201
+ border-color: var(--ffe-v-button-task-border-focus);
271
202
 
272
203
  &::after {
273
204
  display: none;
@@ -312,10 +243,10 @@
312
243
  }
313
244
 
314
245
  .ffe-button--task & {
315
- border: 2px solid @ffe-farge-vann;
246
+ border: 2px solid var(--ffe-v-button-primary-color);
316
247
  border-radius: 50%;
317
248
  background-color: @ffe-farge-hvit;
318
- fill: @ffe-farge-vann;
249
+ fill: var(--ffe-v-button-task-primary-color);
319
250
  height: 45px;
320
251
  padding: 13px;
321
252
  margin: 0 @ffe-spacing-xs 0 0;
@@ -323,22 +254,16 @@
323
254
  transition: all @ffe-transition-duration @ffe-ease;
324
255
  .native & {
325
256
  @media (prefers-color-scheme: dark) {
326
- border-color: @ffe-farge-vann-70;
327
257
  background-color: transparent;
328
- fill: @ffe-farge-vann-30;
329
258
  }
330
259
  }
331
260
  }
332
261
 
333
262
  .ffe-button--expand & {
334
- .native & {
335
- @media (prefers-color-scheme: dark) {
336
- fill: @ffe-farge-vann-30;
337
- }
338
- }
263
+ fill: var(--ffe-v-button-task-primary-color);
339
264
  }
340
-
341
265
  .ffe-button--expand:hover & {
266
+ fill: @ffe-farge-hvit;
342
267
  .native & {
343
268
  @media (prefers-color-scheme: dark) {
344
269
  fill: @ffe-farge-svart;
@@ -347,16 +272,9 @@
347
272
  }
348
273
 
349
274
  .ffe-button--task:hover & {
350
- border-color: @ffe-farge-vann;
351
- background-color: @ffe-farge-vann;
352
- fill: @ffe-farge-hvit;
353
- .native & {
354
- @media (prefers-color-scheme: dark) {
355
- border-color: @ffe-farge-vann-70;
356
- background-color: @ffe-farge-vann-70;
357
- fill: @ffe-farge-svart;
358
- }
359
- }
275
+ border-color: var(--ffe-v-button-primary-color);
276
+ background-color: var(--ffe-v-button-primary-color);
277
+ fill: var(--ffe-v-button-primary-color-text);
360
278
  }
361
279
  }
362
280
 
package/less/buttons.less CHANGED
@@ -1,3 +1,4 @@
1
+ @import 'theme';
1
2
  @import 'button-group';
2
3
  @import 'base-button';
3
4
  @import 'inline-base-button';
package/less/inline-base-button.less CHANGED
@@ -18,13 +18,13 @@
18
18
  border-radius: 1.375rem;
19
19
  cursor: pointer;
20
20
  display: inline-flex;
21
- font-family: 'SpareBank1-regular', 'MuseoSans-500', arial, sans-serif;
21
+ font-family: var(--ffe-g-font);
22
22
  margin: 0 -4px; // Hack to allow box-shadow to float outside content on focus
23
23
  transition: all @ffe-transition-duration @ffe-ease;
24
24
  overflow: hidden;
25
25
  padding: 0 @ffe-spacing-2xs;
26
26
  text-decoration: none;
27
- .ffe-fontsize-body-text();
27
+ font-size: var(--ffe-fontsize-body-text);
28
28
 
29
29
  &:active {
30
30
  transform: scale(0.97);
@@ -49,13 +49,12 @@
49
49
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='0.85em' height='1.6em' viewBox='0 0 200 200'%3E%3Cpath transform = 'rotate(90 100 100)' fill = '%23005aa4' d='m16.171492,41.999998c-4.143269,0-8.2852797,1.57464-11.4277496,4.706478-6.3249899,6.283609-6.3249899,16.499474,0,22.803034l84.0286676,83.76282c6.30496,6.30356,16.54928,6.30356,22.87426,0l83.60959-83.26412c6.32499-6.28361,6.32499-16.499477,0-22.803038-6.30496-6.30356-16.55553-6.30356-22.88051,0l-72.13806,71.893768-72.613438-72.373767c-3.14247-3.151781-7.29074-4.725174-11.433999-4.725174h-0.0188z'/%3E%3C/svg%3E");
50
50
  background-repeat: no-repeat;
51
51
  background-position: 1.375rem center;
52
- color: @ffe-farge-vann;
52
+ color: var(--ffe-v-button-secondary-color);
53
53
  line-height: 24px;
54
54
  padding: @ffe-spacing-xs @ffe-spacing-md @ffe-spacing-xs @ffe-spacing-2xl;
55
55
  outline: none;
56
56
  .native & {
57
57
  @media (prefers-color-scheme: dark) {
58
- color: @ffe-farge-vann-70;
59
58
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='0.85em' height='1.6em' viewBox='0 0 200 200'%3E%3Cpath transform = 'rotate(90 100 100)' fill = '%234d8cbf' d='m16.171492,41.999998c-4.143269,0-8.2852797,1.57464-11.4277496,4.706478-6.3249899,6.283609-6.3249899,16.499474,0,22.803034l84.0286676,83.76282c6.30496,6.30356,16.54928,6.30356,22.87426,0l83.60959-83.26412c6.32499-6.28361,6.32499-16.499477,0-22.803038-6.30496-6.30356-16.55553-6.30356-22.88051,0l-72.13806,71.893768-72.613438-72.373767c-3.14247-3.151781-7.29074-4.725174-11.433999-4.725174h-0.0188z'/%3E%3C/svg%3E");
60
59
  }
61
60
  }
@@ -65,14 +64,6 @@
65
64
  border-bottom: 1px solid transparent;
66
65
  }
67
66
 
68
- &:focus {
69
- .native & {
70
- @media (prefers-color-scheme: dark) {
71
- color: @ffe-farge-vann-70;
72
- }
73
- }
74
- }
75
-
76
67
  &:hover {
77
68
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='0.85em' height='1.6em' viewBox='0 0 200 200'%3E%3Cpath transform = 'rotate(90 100 100)' fill = '%23002776' d='m16.171492,41.999998c-4.143269,0-8.2852797,1.57464-11.4277496,4.706478-6.3249899,6.283609-6.3249899,16.499474,0,22.803034l84.0286676,83.76282c6.30496,6.30356,16.54928,6.30356,22.87426,0l83.60959-83.26412c6.32499-6.28361,6.32499-16.499477,0-22.803038-6.30496-6.30356-16.55553-6.30356-22.88051,0l-72.13806,71.893768-72.613438-72.373767c-3.14247-3.151781-7.29074-4.725174-11.433999-4.725174h-0.0188z'/%3E%3C/svg%3E");
78
69
 
@@ -84,49 +75,27 @@
84
75
  }
85
76
 
86
77
  &:hover .ffe-inline-button__label {
87
- color: @ffe-farge-fjell;
88
- border-bottom-color: @ffe-farge-fjell;
89
- .native & {
90
- @media (prefers-color-scheme: dark) {
91
- color: @ffe-farge-vann-30;
92
- border-bottom-color: @ffe-farge-vann-30;
93
- }
94
- }
78
+ color: var(--ffe-v-button-secondary-color-hover);
79
+ border-bottom-color: var(--ffe-v-button-secondary-color-hover);
95
80
  }
96
81
  }
97
82
 
98
83
  .ffe-inline-button--expand {
99
- color: @ffe-farge-vann;
84
+ color: var(--ffe-v-button-secondary-color);
100
85
  padding: 0 @ffe-spacing-xs;
101
86
  margin: 0;
102
87
 
103
- .native & {
104
- @media (prefers-color-scheme: dark) {
105
- color: @ffe-farge-vann-70;
106
- }
107
- }
108
-
109
88
  &:hover {
110
- color: @ffe-farge-fjell;
111
- .native & {
112
- @media (prefers-color-scheme: dark) {
113
- color: @ffe-farge-vann-30;
114
- }
115
- }
89
+ color: var(--ffe-v-button-secondary-color-hover);
116
90
  }
117
91
  }
118
92
 
119
93
  .ffe-inline-button--tertiary {
120
94
  align-content: center;
121
- color: @ffe-farge-vann;
95
+ color: var(--ffe-v-button-tertiary-color);
122
96
  flex-wrap: wrap;
123
97
  padding: @ffe-spacing-xs (@ffe-spacing-sm + 1);
124
98
  border: 2px solid transparent;
125
- .native & {
126
- @media (prefers-color-scheme: dark) {
127
- color: @ffe-farge-vann-30;
128
- }
129
- }
130
99
 
131
100
  &::after {
132
101
  border-bottom: solid 1px currentColor;
@@ -137,14 +106,13 @@
137
106
 
138
107
  &:focus {
139
108
  box-shadow: none;
140
- border-color: @ffe-farge-vann;
141
- color: @ffe-farge-vann;
109
+ border-color: var(--ffe-v-button-tertiary-color);
110
+ color: var(--ffe-v-button-tertiary-color);
142
111
 
143
112
  .native & {
144
113
  @media (prefers-color-scheme: dark) {
145
114
  border-color: @ffe-farge-hvit;
146
115
  box-shadow: none;
147
- color: @ffe-farge-vann-30;
148
116
  }
149
117
  }
150
118
  }
@@ -154,7 +122,7 @@
154
122
  }
155
123
 
156
124
  &:hover {
157
- color: @ffe-farge-fjell;
125
+ color: var(--ffe-v-button-tertiary-color-hover);
158
126
  .native & {
159
127
  @media (prefers-color-scheme: dark) {
160
128
  color: @ffe-farge-hvit;
package/less/theme.less ADDED
@@ -0,0 +1,55 @@
1
+ :root {
2
+ /** Buttons */
3
+
4
+ /* Common button text color */
5
+ --ffe-v-button-text-color: var(--ffe-farge-hvit);
6
+
7
+ /* Button border radius renders as 50% */
8
+ --ffe-v-buttons-border-radius: 6em;
9
+
10
+ /** Action button */
11
+ --ffe-v-button-action-color: var(--ffe-farge-nordlys-wcag);
12
+ --ffe-v-button-action-color-hover: var(--ffe-farge-skog);
13
+ --ffe-v-button-action-color-text: var(--ffe-farge-hvit);
14
+
15
+ /** Primary button */
16
+ --ffe-v-button-primary-color: var(--ffe-farge-vann);
17
+ --ffe-v-button-primary-color-hover: var(--ffe-farge-fjell);
18
+ --ffe-v-button-primary-color-text: var(--ffe-farge-hvit);
19
+
20
+ /** Secondary buttons (+ task, back, expand, etc) are inverted */
21
+ --ffe-v-button-secondary-color: var(--ffe-farge-vann);
22
+ --ffe-v-button-secondary-color-hover: var(--ffe-farge-fjell);
23
+ --ffe-v-button-secondary-color-bg: var(--ffe-farge-hvit);
24
+
25
+ /** Tertiary button */
26
+ --ffe-v-button-tertiary-color: var(--ffe-farge-vann);
27
+ --ffe-v-button-tertiary-color-hover: var(--ffe-farge-fjell);
28
+ --ffe-v-button-tertiary-color-text: var(--ffe-farge-hvit);
29
+
30
+ /** Task button */
31
+ --ffe-v-button-task-primary-color: var(--ffe-farge-vann);
32
+ --ffe-v-button-task-text-color-hover: var(--ffe-farge-fjell);
33
+ --ffe-v-button-task-border-focus: var(--ffe-farge-vann);
34
+
35
+ @media (prefers-color-scheme: dark) {
36
+ .native {
37
+ --ffe-v-button-text-color: var(--ffe-farge-svart);
38
+ --ffe-v-button-action-color: var(--ffe-farge-nordlys);
39
+ --ffe-v-button-action-color-hover: var(--ffe-farge-nordlys-30);
40
+ --ffe-v-button-action-color-text: var(--ffe-farge-svart);
41
+ --ffe-v-button-primary-color: var(--ffe-farge-vann-70);
42
+ --ffe-v-button-primary-color-hover: var(--ffe-farge-vann-30);
43
+ --ffe-v-button-primary-color-text: var(--ffe-farge-svart);
44
+ --ffe-v-button-secondary-color: var(--ffe-farge-vann-70);
45
+ --ffe-v-button-secondary-color-hover: var(--ffe-farge-vann-30);
46
+ --ffe-v-button-secondary-color-bg: var(--ffe-farge-svart);
47
+ --ffe-v-button-tertiary-color: var(--ffe-farge-vann-70);
48
+ --ffe-v-button-tertiary-color-hover: var(--ffe-farge-vann-30);
49
+ --ffe-v-button-tertiary-color-text: var(--ffe-farge-svart);
50
+ --ffe-v-button-task-text-color-hover: var(--ffe-farge-hvit);
51
+ --ffe-v-button-task-border-focus: var(--ffe-farge-hvit);
52
+ --ffe-v-button-task-primary-color: var(--ffe-farge-vann-30);
53
+ }
54
+ }
55
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sb1/ffe-buttons",
3
- "version": "15.1.7",
3
+ "version": "16.1.0",
4
4
  "license": "MIT",
5
5
  "author": "SpareBank1",
6
6
  "files": [
@@ -11,12 +11,12 @@
11
11
  "url": "ssh://git@github.com:SpareBank1/designsystem.git"
12
12
  },
13
13
  "scripts": {
14
- "lint": "stylelint less/*.less",
14
+ "lint": "ffe-buildtool stylelint less/*.less",
15
15
  "test": "npm run lint"
16
16
  },
17
17
  "devDependencies": {
18
- "@sb1/ffe-core": "^25.0.0",
19
- "stylelint": "^13.0.0"
18
+ "@sb1/ffe-buildtool": "^0.5.0",
19
+ "@sb1/ffe-core": "^26.1.0"
20
20
  },
21
21
  "peerDependencies": {
22
22
  "@sb1/ffe-core": "*"
@@ -24,5 +24,5 @@
24
24
  "publishConfig": {
25
25
  "access": "public"
26
26
  },
27
- "gitHead": "98d9ceeaa9bebcd35d5a730227aac61fd28937cf"
27
+ "gitHead": "816e0f967f7b2d8fd6cca41bb9d363a4c7933116"
28
28
  }