@sb1/ffe-core 25.0.0 → 26.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.
- package/README.md +0 -2
- package/less/{themes.less → body.less} +0 -0
- package/less/ffe.less +11 -4
- package/less/theme.less +164 -0
- package/less/typography.less +51 -99
- package/package.json +4 -4
- package/less/font-sizes.less +0 -80
- package/less/layout.less +0 -20
package/README.md
CHANGED
|
@@ -32,8 +32,6 @@ pieces you require if you want:
|
|
|
32
32
|
@import '~@sb1/ffe-core/less/motion';
|
|
33
33
|
@import '~@sb1/ffe-core/less/spacing';
|
|
34
34
|
|
|
35
|
-
// Font size mixins
|
|
36
|
-
@import '~@sb1/ffe-core/less/font-sizes';
|
|
37
35
|
// Basic typography
|
|
38
36
|
@import '~@sb1/ffe-core/less/typography';
|
|
39
37
|
// Accessibility helpers
|
|
File without changes
|
package/less/ffe.less
CHANGED
|
@@ -1,11 +1,18 @@
|
|
|
1
1
|
@import (inline) 'normalize.css';
|
|
2
2
|
@import 'ffe-normalize';
|
|
3
|
+
|
|
4
|
+
// less variables
|
|
5
|
+
@import 'breakpoints';
|
|
3
6
|
@import 'colors';
|
|
4
|
-
@import '
|
|
7
|
+
@import 'dimensions';
|
|
8
|
+
@import 'motion';
|
|
5
9
|
@import 'spacing';
|
|
10
|
+
|
|
11
|
+
// css custom properties
|
|
12
|
+
@import 'theme';
|
|
13
|
+
|
|
14
|
+
// basic styles
|
|
6
15
|
@import 'typography';
|
|
7
|
-
@import '
|
|
8
|
-
@import 'motion';
|
|
16
|
+
@import 'body';
|
|
9
17
|
@import 'accessibility';
|
|
10
|
-
@import 'themes';
|
|
11
18
|
@import 'waves';
|
package/less/theme.less
ADDED
|
@@ -0,0 +1,164 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* These variables are intended to support theming of components. Override any value to create your own look and feel.
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
:root {
|
|
6
|
+
/** Primærpalett */
|
|
7
|
+
--ffe-farge-fjell: @ffe-farge-fjell;
|
|
8
|
+
--ffe-farge-fjell-70: @ffe-farge-fjell-70;
|
|
9
|
+
--ffe-farge-fjell-30: @ffe-farge-fjell-30;
|
|
10
|
+
--ffe-farge-vann: @ffe-farge-vann;
|
|
11
|
+
--ffe-farge-vann-70: @ffe-farge-vann-70;
|
|
12
|
+
--ffe-farge-vann-30: @ffe-farge-vann-30;
|
|
13
|
+
--ffe-farge-sand: @ffe-farge-sand;
|
|
14
|
+
--ffe-farge-sand-70: @ffe-farge-sand-70;
|
|
15
|
+
--ffe-farge-sand-30: @ffe-farge-sand-30;
|
|
16
|
+
--ffe-farge-frost: @ffe-farge-frost;
|
|
17
|
+
--ffe-farge-frost-70: @ffe-farge-frost-70;
|
|
18
|
+
--ffe-farge-frost-30: @ffe-farge-frost-30;
|
|
19
|
+
--ffe-farge-syrin: @ffe-farge-syrin;
|
|
20
|
+
--ffe-farge-syrin-70: @ffe-farge-syrin-70;
|
|
21
|
+
--ffe-farge-syrin-30: @ffe-farge-syrin-30;
|
|
22
|
+
|
|
23
|
+
/** Støttefarger */
|
|
24
|
+
--ffe-farge-myrull: @ffe-farge-myrull;
|
|
25
|
+
--ffe-farge-myrull-70: @ffe-farge-myrull-70;
|
|
26
|
+
--ffe-farge-myrull-30: @ffe-farge-myrull-30;
|
|
27
|
+
--ffe-farge-villblomst: @ffe-farge-villblomst;
|
|
28
|
+
--ffe-farge-villblomst-70: @ffe-farge-villblomst-70;
|
|
29
|
+
--ffe-farge-villblomst-30: @ffe-farge-villblomst-30;
|
|
30
|
+
--ffe-farge-nordlys: @ffe-farge-nordlys;
|
|
31
|
+
--ffe-farge-nordlys-wcag: @ffe-farge-nordlys-wcag;
|
|
32
|
+
--ffe-farge-nordlys-70: @ffe-farge-nordlys-70;
|
|
33
|
+
--ffe-farge-nordlys-30: @ffe-farge-nordlys-30;
|
|
34
|
+
--ffe-farge-lyng: @ffe-farge-lyng;
|
|
35
|
+
--ffe-farge-lyng-70: @ffe-farge-lyng-70;
|
|
36
|
+
--ffe-farge-lyng-30: @ffe-farge-lyng-30;
|
|
37
|
+
--ffe-farge-baer: @ffe-farge-baer;
|
|
38
|
+
--ffe-farge-baer-70: @ffe-farge-baer-70;
|
|
39
|
+
--ffe-farge-baer-30: @ffe-farge-baer-30;
|
|
40
|
+
--ffe-farge-skog: @ffe-farge-skog;
|
|
41
|
+
--ffe-farge-skog-70: @ffe-farge-skog-70;
|
|
42
|
+
--ffe-farge-skog-30: @ffe-farge-skog-30;
|
|
43
|
+
--ffe-farge-multe: @ffe-farge-multe;
|
|
44
|
+
--ffe-farge-multe-70: @ffe-farge-multe-70;
|
|
45
|
+
--ffe-farge-multe-30: @ffe-farge-multe-30;
|
|
46
|
+
--ffe-farge-sol: @ffe-farge-sol;
|
|
47
|
+
--ffe-farge-sol-70: @ffe-farge-sol-70;
|
|
48
|
+
--ffe-farge-sol-30: @ffe-farge-sol-30;
|
|
49
|
+
|
|
50
|
+
/** Nøytrale farger */
|
|
51
|
+
--ffe-farge-natt: @ffe-farge-natt;
|
|
52
|
+
--ffe-farge-svart: @ffe-farge-svart;
|
|
53
|
+
--ffe-farge-koksgraa: @ffe-farge-koksgraa;
|
|
54
|
+
--ffe-farge-moerkgraa: @ffe-farge-moerkgraa;
|
|
55
|
+
--ffe-farge-graa: @ffe-farge-graa;
|
|
56
|
+
--ffe-farge-lysgraa: @ffe-farge-lysgraa;
|
|
57
|
+
--ffe-farge-moerkvarmgraa: @ffe-farge-moerkvarmgraa;
|
|
58
|
+
--ffe-farge-varmgraa: @ffe-farge-varmgraa;
|
|
59
|
+
--ffe-farge-lysvarmgraa: @ffe-farge-lysvarmgraa;
|
|
60
|
+
--ffe-farge-hvit: @ffe-farge-hvit;
|
|
61
|
+
|
|
62
|
+
/** Font sizes */
|
|
63
|
+
--ffe-fontsize-body-text: 1rem;
|
|
64
|
+
--ffe-fontsize-small-text: 0.875rem;
|
|
65
|
+
--ffe-fontsize-micro-text: 0.75rem;
|
|
66
|
+
--ffe-fontsize-lead-paragraph: 1.125rem;
|
|
67
|
+
--ffe-fontsize-sub-lead-paragraph: 1.063rem;
|
|
68
|
+
--ffe-fontsize-h1: 1.75rem;
|
|
69
|
+
--ffe-fontsize-h2: 1.5rem;
|
|
70
|
+
--ffe-fontsize-h3: 1.25rem;
|
|
71
|
+
--ffe-fontsize-h4: 1.125rem;
|
|
72
|
+
--ffe-fontsize-h5: 1.0625rem;
|
|
73
|
+
--ffe-fontsize-h6: 1rem;
|
|
74
|
+
--ffe-fontsize-form-input: 1rem;
|
|
75
|
+
--ffe-fontsize-form-dropdown: 1rem;
|
|
76
|
+
--ffe-fontsize-button: 1rem;
|
|
77
|
+
|
|
78
|
+
@media (min-width: @breakpoint-sm) {
|
|
79
|
+
--ffe-fontsize-lead-paragraph: 1.5rem;
|
|
80
|
+
--ffe-fontsize-sub-lead-paragraph: 1.125rem;
|
|
81
|
+
--ffe-fontsize-h1: 2.5rem;
|
|
82
|
+
--ffe-fontsize-h2: 2rem;
|
|
83
|
+
--ffe-fontsize-h3: 1.688rem;
|
|
84
|
+
--ffe-fontsize-h4: 1.375rem;
|
|
85
|
+
--ffe-fontsize-h5: 1.125rem;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
@media (min-width: @breakpoint-md) {
|
|
89
|
+
--ffe-fontsize-h1: 2.875rem;
|
|
90
|
+
--ffe-fontsize-h2: 2.25rem;
|
|
91
|
+
--ffe-fontsize-h3: 1.75rem;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
/** Theme base colors */
|
|
95
|
+
|
|
96
|
+
/* Links, buttons and similar */
|
|
97
|
+
--ffe-g-primary-color: var(--ffe-farge-vann);
|
|
98
|
+
|
|
99
|
+
/* Headings, labels, hover, etc */
|
|
100
|
+
--ffe-g-secondary-color: var(--ffe-farge-fjell);
|
|
101
|
+
|
|
102
|
+
/* Error messages, invalid inputs, etc */
|
|
103
|
+
--ffe-g-error-color: var(--ffe-farge-baer);
|
|
104
|
+
|
|
105
|
+
/** Theme borders */
|
|
106
|
+
|
|
107
|
+
/* Form element borders */
|
|
108
|
+
--ffe-g-border-color: var(--ffe-farge-varmgraa);
|
|
109
|
+
--ffe-g-border-radius: 4px;
|
|
110
|
+
|
|
111
|
+
/** Fonts */
|
|
112
|
+
|
|
113
|
+
/* Default font */
|
|
114
|
+
--ffe-g-font: 'SpareBank1-regular', 'MuseoSans-500', arial, sans-serif;
|
|
115
|
+
|
|
116
|
+
/* h1 - h2 */
|
|
117
|
+
--ffe-g-font-heading: 'SpareBank1-title-medium', 'MuseoSansRounded-700',
|
|
118
|
+
arial, sans-serif;
|
|
119
|
+
|
|
120
|
+
/* h3 - h6 */
|
|
121
|
+
--ffe-g-font-heading-small: 'SpareBank1-medium', 'MuseoSansRounded-700',
|
|
122
|
+
arial, sans-serif;
|
|
123
|
+
|
|
124
|
+
/* Bold text */
|
|
125
|
+
--ffe-g-font-strong: 'SpareBank1-medium', 'MuseoSansRounded-700', arial,
|
|
126
|
+
sans-serif;
|
|
127
|
+
|
|
128
|
+
/* Emphasized text */
|
|
129
|
+
--ffe-g-font-italic: 'SpareBank1-italic', 'MuseoSans-500', arial, sans-serif;
|
|
130
|
+
|
|
131
|
+
/** Typography */
|
|
132
|
+
|
|
133
|
+
/* Default body text color */
|
|
134
|
+
--ffe-g-text-color: var(--ffe-farge-svart);
|
|
135
|
+
|
|
136
|
+
/* Lead paragraph */
|
|
137
|
+
--ffe-g-lead-color: var(--ffe-farge-fjell);
|
|
138
|
+
|
|
139
|
+
/* Headings */
|
|
140
|
+
--ffe-g-heading-color: var(--ffe-farge-fjell);
|
|
141
|
+
|
|
142
|
+
/* Links */
|
|
143
|
+
--ffe-g-link-color: var(--ffe-farge-vann);
|
|
144
|
+
--ffe-g-link-color-hover: var(--ffe-farge-fjell);
|
|
145
|
+
--ffe-g-link-color-visited: var(--ffe-farge-lyng);
|
|
146
|
+
--ffe-g-link-icon-color-hover: var(--ffe-farge-natt);
|
|
147
|
+
--ffe-g-link-icon-color-focus: var(--ffe-farge-vann);
|
|
148
|
+
|
|
149
|
+
@media (prefers-color-scheme: dark) {
|
|
150
|
+
.native {
|
|
151
|
+
--ffe-g-primary-color: var(--ffe-farge-vann-70);
|
|
152
|
+
--ffe-g-secondary-color: var(--ffe-farge-vann-70);
|
|
153
|
+
--ffe-g-border-color: var(--ffe-farge-graa);
|
|
154
|
+
--ffe-g-text-color: var(--ffe-farge-lysgraa);
|
|
155
|
+
--ffe-g-lead-color: var(--ffe-farge-hvit);
|
|
156
|
+
--ffe-g-heading-color: var(--ffe-farge-vann-70);
|
|
157
|
+
--ffe-g-link-color: var(--ffe-farge-vann-70);
|
|
158
|
+
--ffe-g-link-color-hover: var(--ffe-farge-vann-30);
|
|
159
|
+
--ffe-g-link-color-visited: var(--ffe-farge-lyng-70);
|
|
160
|
+
--ffe-g-link-icon-color-hover: var(--ffe-farge-vann-30);
|
|
161
|
+
--ffe-g-link-icon-color-focus: var(--ffe-farge-hvit);
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
}
|
package/less/typography.less
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
@import 'breakpoints';
|
|
2
2
|
@import 'colors';
|
|
3
|
-
@import 'font-sizes';
|
|
4
3
|
|
|
5
4
|
// Heading
|
|
6
5
|
//
|
|
@@ -141,60 +140,50 @@
|
|
|
141
140
|
|
|
142
141
|
.ffe-h1 {
|
|
143
142
|
line-height: 2.25rem;
|
|
144
|
-
|
|
143
|
+
font-size: var(--ffe-fontsize-h1);
|
|
145
144
|
}
|
|
146
145
|
|
|
147
146
|
.ffe-h2 {
|
|
148
147
|
line-height: 1.75rem;
|
|
149
|
-
|
|
148
|
+
font-size: var(--ffe-fontsize-h2);
|
|
150
149
|
}
|
|
151
150
|
|
|
152
151
|
.ffe-h3 {
|
|
153
152
|
line-height: 1.5rem;
|
|
154
|
-
|
|
153
|
+
font-size: var(--ffe-fontsize-h3);
|
|
155
154
|
}
|
|
156
155
|
|
|
157
156
|
.ffe-h4 {
|
|
158
157
|
line-height: 1.5rem;
|
|
159
|
-
|
|
158
|
+
font-size: var(--ffe-fontsize-h4);
|
|
160
159
|
}
|
|
161
160
|
|
|
162
161
|
.ffe-h5 {
|
|
163
162
|
line-height: 1.25rem;
|
|
164
|
-
|
|
163
|
+
font-size: var(--ffe-fontsize-h5);
|
|
165
164
|
}
|
|
166
165
|
|
|
167
166
|
.ffe-h6 {
|
|
168
167
|
line-height: 1.25rem;
|
|
169
|
-
|
|
168
|
+
font-size: var(--ffe-fontsize-h6);
|
|
170
169
|
}
|
|
171
170
|
|
|
172
171
|
.ffe-small-text {
|
|
173
|
-
color:
|
|
174
|
-
font-family:
|
|
172
|
+
color: var(--ffe-g-text-color);
|
|
173
|
+
font-family: var(--ffe-g-font);
|
|
175
174
|
font-weight: normal;
|
|
176
175
|
font-variant-numeric: tabular-nums;
|
|
177
176
|
line-height: 1.25rem;
|
|
178
|
-
|
|
179
|
-
.native & {
|
|
180
|
-
@media (prefers-color-scheme: dark) {
|
|
181
|
-
color: @ffe-farge-lysgraa;
|
|
182
|
-
}
|
|
183
|
-
}
|
|
177
|
+
font-size: var(--ffe-fontsize-small-text);
|
|
184
178
|
}
|
|
185
179
|
|
|
186
180
|
.ffe-micro-text {
|
|
187
|
-
color:
|
|
188
|
-
font-family:
|
|
181
|
+
color: var(--ffe-g-text-color);
|
|
182
|
+
font-family: var(--ffe-g-font);
|
|
189
183
|
font-weight: normal;
|
|
190
184
|
font-variant-numeric: tabular-nums;
|
|
191
185
|
line-height: 1.25rem;
|
|
192
|
-
|
|
193
|
-
.native & {
|
|
194
|
-
@media (prefers-color-scheme: dark) {
|
|
195
|
-
color: @ffe-farge-lysgraa;
|
|
196
|
-
}
|
|
197
|
-
}
|
|
186
|
+
font-size: var(--ffe-fontsize-micro-text);
|
|
198
187
|
}
|
|
199
188
|
|
|
200
189
|
.ffe-h1,
|
|
@@ -203,23 +192,13 @@
|
|
|
203
192
|
.ffe-h4,
|
|
204
193
|
.ffe-h5,
|
|
205
194
|
.ffe-h6 {
|
|
206
|
-
color:
|
|
195
|
+
color: var(--ffe-g-heading-color);
|
|
207
196
|
font-weight: normal;
|
|
208
197
|
margin-bottom: 10px;
|
|
209
198
|
margin-top: 0;
|
|
210
|
-
.native & {
|
|
211
|
-
@media (prefers-color-scheme: dark) {
|
|
212
|
-
color: @ffe-farge-vann-70;
|
|
213
|
-
}
|
|
214
|
-
}
|
|
215
199
|
|
|
216
200
|
&--error {
|
|
217
|
-
color:
|
|
218
|
-
.native & {
|
|
219
|
-
@media (prefers-color-scheme: dark) {
|
|
220
|
-
color: @ffe-farge-baer;
|
|
221
|
-
}
|
|
222
|
-
}
|
|
201
|
+
color: var(--ffe-g-error-color);
|
|
223
202
|
}
|
|
224
203
|
|
|
225
204
|
&--inline {
|
|
@@ -251,43 +230,32 @@
|
|
|
251
230
|
|
|
252
231
|
.ffe-h1,
|
|
253
232
|
.ffe-h2 {
|
|
254
|
-
font-family:
|
|
255
|
-
sans-serif;
|
|
233
|
+
font-family: var(--ffe-g-font-heading);
|
|
256
234
|
}
|
|
257
235
|
|
|
258
236
|
.ffe-h3,
|
|
259
237
|
.ffe-h4,
|
|
260
238
|
.ffe-h5,
|
|
261
239
|
.ffe-h6 {
|
|
262
|
-
font-family:
|
|
240
|
+
font-family: var(--ffe-g-font-heading-small);
|
|
263
241
|
font-variant-numeric: tabular-nums;
|
|
264
242
|
}
|
|
265
243
|
|
|
266
244
|
.ffe-body-text {
|
|
267
|
-
color:
|
|
268
|
-
font-family:
|
|
245
|
+
color: var(--ffe-g-text-color);
|
|
246
|
+
font-family: var(--ffe-g-font);
|
|
269
247
|
font-variant-numeric: tabular-nums;
|
|
270
248
|
line-height: 1.5rem;
|
|
271
|
-
|
|
272
|
-
.native & {
|
|
273
|
-
@media (prefers-color-scheme: dark) {
|
|
274
|
-
color: @ffe-farge-lysgraa;
|
|
275
|
-
}
|
|
276
|
-
}
|
|
249
|
+
font-size: var(--ffe-fontsize-body-text);
|
|
277
250
|
}
|
|
278
251
|
|
|
279
252
|
.ffe-body-paragraph {
|
|
280
|
-
font-family:
|
|
253
|
+
font-family: var(--ffe-g-font);
|
|
281
254
|
font-variant-numeric: tabular-nums;
|
|
282
255
|
margin-bottom: 1em;
|
|
283
256
|
margin-top: 0;
|
|
284
257
|
line-height: 1.5rem;
|
|
285
|
-
color:
|
|
286
|
-
.native & {
|
|
287
|
-
@media (prefers-color-scheme: dark) {
|
|
288
|
-
color: @ffe-farge-lysgraa;
|
|
289
|
-
}
|
|
290
|
-
}
|
|
258
|
+
color: var(--ffe-g-text-color);
|
|
291
259
|
|
|
292
260
|
&--text-center {
|
|
293
261
|
text-align: center;
|
|
@@ -300,72 +268,43 @@
|
|
|
300
268
|
|
|
301
269
|
.ffe-lead-paragraph,
|
|
302
270
|
.ffe-sub-lead-paragraph {
|
|
303
|
-
font-family:
|
|
271
|
+
font-family: var(--ffe-g-font);
|
|
304
272
|
font-variant-numeric: tabular-nums;
|
|
305
273
|
margin-top: 0;
|
|
306
274
|
margin-bottom: 1em;
|
|
307
275
|
}
|
|
308
276
|
|
|
309
277
|
.ffe-lead-paragraph {
|
|
310
|
-
color:
|
|
278
|
+
color: var(--ffe-g-lead-color);
|
|
311
279
|
line-height: 1.5rem;
|
|
312
|
-
|
|
313
|
-
.native & {
|
|
314
|
-
@media (prefers-color-scheme: dark) {
|
|
315
|
-
color: @ffe-farge-hvit;
|
|
316
|
-
}
|
|
317
|
-
}
|
|
280
|
+
font-size: var(--ffe-fontsize-lead-paragraph);
|
|
318
281
|
}
|
|
319
282
|
|
|
320
283
|
.ffe-sub-lead-paragraph {
|
|
321
|
-
color:
|
|
284
|
+
color: var(--ffe-g-text-color);
|
|
322
285
|
line-height: 1.5rem;
|
|
323
|
-
|
|
324
|
-
.native & {
|
|
325
|
-
@media (prefers-color-scheme: dark) {
|
|
326
|
-
color: @ffe-farge-lysgraa;
|
|
327
|
-
}
|
|
328
|
-
}
|
|
286
|
+
font-size: var(--ffe-fontsize-sub-lead-paragraph);
|
|
329
287
|
}
|
|
330
288
|
|
|
331
289
|
.ffe-link-text {
|
|
332
|
-
border-bottom: 1px solid
|
|
333
|
-
color:
|
|
290
|
+
border-bottom: 1px solid var(--ffe-g-link-color);
|
|
291
|
+
color: var(--ffe-g-link-color);
|
|
334
292
|
cursor: pointer;
|
|
335
293
|
text-decoration: none;
|
|
336
294
|
word-wrap: break-word;
|
|
337
295
|
line-height: 1em;
|
|
338
296
|
transition: all @ffe-transition-duration @ffe-ease;
|
|
339
297
|
|
|
340
|
-
.native & {
|
|
341
|
-
@media (prefers-color-scheme: dark) {
|
|
342
|
-
color: @ffe-farge-vann-70;
|
|
343
|
-
border-color: @ffe-farge-vann-70;
|
|
344
|
-
}
|
|
345
|
-
}
|
|
346
|
-
|
|
347
298
|
&:hover {
|
|
348
|
-
border-bottom-color:
|
|
349
|
-
color:
|
|
299
|
+
border-bottom-color: var(--ffe-g-link-color-hover);
|
|
300
|
+
color: var(--ffe-g-link-color-hover);
|
|
350
301
|
text-decoration: none;
|
|
351
|
-
.native & {
|
|
352
|
-
@media (prefers-color-scheme: dark) {
|
|
353
|
-
color: @ffe-farge-vann-30;
|
|
354
|
-
border-color: @ffe-farge-vann-30;
|
|
355
|
-
}
|
|
356
|
-
}
|
|
357
302
|
}
|
|
358
303
|
|
|
359
304
|
&:visited {
|
|
360
|
-
border-bottom-color:
|
|
361
|
-
color:
|
|
305
|
+
border-bottom-color: var(--ffe-g-link-color-visited);
|
|
306
|
+
color: var(--ffe-g-link-color-visited);
|
|
362
307
|
text-decoration: none;
|
|
363
|
-
.native & {
|
|
364
|
-
@media (prefers-color-scheme: dark) {
|
|
365
|
-
color: @ffe-farge-lyng-70;
|
|
366
|
-
border-color: @ffe-farge-lyng-70;
|
|
367
|
-
}
|
|
368
|
-
}
|
|
369
308
|
}
|
|
370
309
|
|
|
371
310
|
&--no-underline {
|
|
@@ -375,22 +314,35 @@
|
|
|
375
314
|
&:focus {
|
|
376
315
|
border-color: @ffe-farge-hvit;
|
|
377
316
|
border-radius: 1px;
|
|
378
|
-
background-color:
|
|
379
|
-
box-shadow: 0 0 0 2px
|
|
317
|
+
background-color: var(--ffe-g-link-color);
|
|
318
|
+
box-shadow: 0 0 0 2px var(--ffe-g-link-color);
|
|
380
319
|
color: @ffe-farge-hvit;
|
|
381
320
|
outline: none;
|
|
382
321
|
|
|
383
322
|
.native & {
|
|
384
323
|
@media (prefers-color-scheme: dark) {
|
|
385
324
|
border-color: @ffe-farge-svart !important;
|
|
386
|
-
background-color: @ffe-farge-vann-70;
|
|
387
|
-
box-shadow: 0 0 0 2px @ffe-farge-vann-70;
|
|
388
325
|
color: @ffe-farge-svart !important;
|
|
389
326
|
}
|
|
390
327
|
}
|
|
391
328
|
}
|
|
392
329
|
}
|
|
393
330
|
|
|
331
|
+
.ffe-link-icon {
|
|
332
|
+
fill: var(--ffe-g-link-color);
|
|
333
|
+
display: inline-flex;
|
|
334
|
+
border-radius: 1.5rem;
|
|
335
|
+
border: 2px solid transparent;
|
|
336
|
+
outline: 0;
|
|
337
|
+
padding: @ffe-spacing-2xs;
|
|
338
|
+
&:hover {
|
|
339
|
+
fill: var(--ffe-g-link-icon-color-hover);
|
|
340
|
+
}
|
|
341
|
+
&:focus {
|
|
342
|
+
box-shadow: 0 0 0 2px var(--ffe-g-link-icon-color-focus);
|
|
343
|
+
}
|
|
344
|
+
}
|
|
345
|
+
|
|
394
346
|
.ffe-divider-line {
|
|
395
347
|
border: none;
|
|
396
348
|
border-bottom: solid 1px @ffe-farge-lysgraa;
|
|
@@ -405,13 +357,13 @@
|
|
|
405
357
|
}
|
|
406
358
|
|
|
407
359
|
.ffe-strong-text {
|
|
408
|
-
font-family:
|
|
360
|
+
font-family: var(--ffe-g-font-strong);
|
|
409
361
|
font-variant-numeric: tabular-nums;
|
|
410
362
|
font-weight: normal;
|
|
411
363
|
}
|
|
412
364
|
|
|
413
365
|
.ffe-em-text {
|
|
414
|
-
font-family:
|
|
366
|
+
font-family: var(--ffe-g-font-italic);
|
|
415
367
|
font-variant-numeric: tabular-nums;
|
|
416
368
|
font-weight: normal;
|
|
417
369
|
font-style: normal;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sb1/ffe-core",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "26.1.0",
|
|
4
4
|
"description": "Rammeverk for Felles Front End",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "SpareBank 1",
|
|
@@ -16,20 +16,20 @@
|
|
|
16
16
|
"url": "ssh://git@github.com:SpareBank1/designsystem.git"
|
|
17
17
|
},
|
|
18
18
|
"scripts": {
|
|
19
|
-
"lint": "stylelint less/*.less",
|
|
19
|
+
"lint": "ffe-buildtool stylelint less/*.less",
|
|
20
20
|
"test": "npm run lint",
|
|
21
21
|
"clean": "rm -rf css/ gen-src/ lib/",
|
|
22
22
|
"build": "./scripts/build.js tokens.config.js && ./scripts/build-custom-mq.js less/breakpoints.less css/custom-media-queries.css && tsc gen-src/index.ts --declaration --outDir lib"
|
|
23
23
|
},
|
|
24
24
|
"devDependencies": {
|
|
25
|
+
"@sb1/ffe-buildtool": "^0.5.0",
|
|
25
26
|
"case": "^1.5.5",
|
|
26
27
|
"less": "^4.1.2",
|
|
27
28
|
"postcss": "^8.3.6",
|
|
28
|
-
"stylelint": "^13.0.0",
|
|
29
29
|
"typescript": "^4.6.4"
|
|
30
30
|
},
|
|
31
31
|
"publishConfig": {
|
|
32
32
|
"access": "public"
|
|
33
33
|
},
|
|
34
|
-
"gitHead": "
|
|
34
|
+
"gitHead": "816e0f967f7b2d8fd6cca41bb9d363a4c7933116"
|
|
35
35
|
}
|
package/less/font-sizes.less
DELETED
|
@@ -1,80 +0,0 @@
|
|
|
1
|
-
/* stylelint-disable */
|
|
2
|
-
.ffe-fontsize(@minWidth, @rules) {
|
|
3
|
-
@media (min-width: @minWidth) {
|
|
4
|
-
@rules();
|
|
5
|
-
}
|
|
6
|
-
}
|
|
7
|
-
/* stylelint-enable */
|
|
8
|
-
|
|
9
|
-
.ffe-fontsize-body-text() {
|
|
10
|
-
font-size: 1rem;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
.ffe-fontsize-small-text() {
|
|
14
|
-
font-size: 0.875rem;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
.ffe-fontsize-micro-text() {
|
|
18
|
-
font-size: 0.75rem;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
.ffe-fontsize-lead-paragraph() {
|
|
22
|
-
font-size: 1.125rem;
|
|
23
|
-
|
|
24
|
-
.ffe-fontsize(@breakpoint-sm, {font-size: 1.5rem;});
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
.ffe-fontsize-sub-lead-paragraph() {
|
|
28
|
-
font-size: 1.063rem;
|
|
29
|
-
|
|
30
|
-
.ffe-fontsize(@breakpoint-sm, {font-size: 1.125rem;});
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
.ffe-fontsize-h1() {
|
|
34
|
-
font-size: 1.75rem;
|
|
35
|
-
|
|
36
|
-
.ffe-fontsize(@breakpoint-sm, {font-size: 2.5rem;});
|
|
37
|
-
.ffe-fontsize(@breakpoint-md, {font-size: 2.875rem;});
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
.ffe-fontsize-h2() {
|
|
41
|
-
font-size: 1.5rem;
|
|
42
|
-
|
|
43
|
-
.ffe-fontsize(@breakpoint-sm, {font-size: 2rem;});
|
|
44
|
-
.ffe-fontsize(@breakpoint-md, {font-size: 2.25rem;});
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
.ffe-fontsize-h3() {
|
|
48
|
-
font-size: 1.25rem;
|
|
49
|
-
|
|
50
|
-
.ffe-fontsize(@breakpoint-sm, {font-size: 1.688rem;});
|
|
51
|
-
.ffe-fontsize(@breakpoint-md, {font-size: 1.75rem;});
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
.ffe-fontsize-h4() {
|
|
55
|
-
font-size: 1.125rem;
|
|
56
|
-
|
|
57
|
-
.ffe-fontsize(@breakpoint-sm, {font-size: 1.375rem;});
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
.ffe-fontsize-h5() {
|
|
61
|
-
font-size: 1.0625rem;
|
|
62
|
-
|
|
63
|
-
.ffe-fontsize(@breakpoint-sm, {font-size: 1.125rem;});
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
.ffe-fontsize-h6() {
|
|
67
|
-
font-size: 1rem;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
.ffe-fontsize-form-input() {
|
|
71
|
-
font-size: 1rem;
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
.ffe-fontsize-form-dropdown() {
|
|
75
|
-
font-size: 1rem;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
.ffe-fontsize-button() {
|
|
79
|
-
font-size: 1rem;
|
|
80
|
-
}
|
package/less/layout.less
DELETED
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
@import 'breakpoints';
|
|
2
|
-
@import 'dimensions';
|
|
3
|
-
|
|
4
|
-
.ffe-icon-base {
|
|
5
|
-
background-size: cover;
|
|
6
|
-
display: inline-block;
|
|
7
|
-
height: 50px;
|
|
8
|
-
vertical-align: middle;
|
|
9
|
-
width: 50px;
|
|
10
|
-
|
|
11
|
-
@media (min-width: @breakpoint-sm) {
|
|
12
|
-
height: 75px;
|
|
13
|
-
width: 75px;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
@media (min-width: @breakpoint-md) {
|
|
17
|
-
height: 90px;
|
|
18
|
-
width: 90px;
|
|
19
|
-
}
|
|
20
|
-
}
|