@sb1/ffe-core 33.1.0 → 33.2.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/css/colors-semantic.css +651 -354
  2. package/css/ffe.css +690 -398
  3. package/less/colors-semantic.less +651 -354
  4. package/package.json +3 -3
  5. package/less/colors-semantic-storybook.less +0 -290
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sb1/ffe-core",
3
- "version": "33.1.0",
3
+ "version": "33.2.0",
4
4
  "description": "Rammeverk for Felles Front End",
5
5
  "license": "MIT",
6
6
  "author": "SpareBank 1",
@@ -35,7 +35,7 @@
35
35
  "build-colors": "./scripts/build-colors.cjs"
36
36
  },
37
37
  "devDependencies": {
38
- "@sb1/ffe-buildtool": "^0.10.1",
38
+ "@sb1/ffe-buildtool": "^0.10.2",
39
39
  "case": "^1.5.5",
40
40
  "less": "^4.1.2",
41
41
  "postcss": "^8.3.6"
@@ -43,5 +43,5 @@
43
43
  "publishConfig": {
44
44
  "access": "public"
45
45
  },
46
- "gitHead": "ec1436a13ace3b42dd314702f4507256dfa4c017"
46
+ "gitHead": "cc5bdf057ae2acf93315e4eb4d8e026320cf03be"
47
47
  }
package/less/colors-semantic-storybook.less DELETED
@@ -1,290 +0,0 @@
1
-
2
- /* Generated from Figma tokens */
3
-
4
- .dark-mode, .dark-mode .ffe-default-mode {
5
- --ffe-color-background-default: #020a0a;
6
- --ffe-color-background-subtle: #1f1f1f;
7
- --ffe-color-surface-primary-default: #292929;
8
- --ffe-color-surface-primary-default-hover: #333333;
9
- --ffe-color-surface-primary-default-pressed: #3d3d3d;
10
- --ffe-color-surface-secondary-default: #0c2232;
11
- --ffe-color-surface-secondary-default-hover: #102d43;
12
- --ffe-color-surface-secondary-default-pressed: #163853;
13
- --ffe-color-surface-tertiary-default: #1d192f;
14
- --ffe-color-surface-tertiary-default-hover: #27223a;
15
- --ffe-color-surface-tertiary-default-pressed: #312c44;
16
- --ffe-color-surface-neutral-default: #3d3d3d;
17
- --ffe-color-surface-neutral-default-hover: #474747;
18
- --ffe-color-surface-neutral-default-pressed: #525252;
19
- --ffe-color-surface-feedback-info: #163853;
20
- --ffe-color-surface-feedback-success: #0a4330;
21
- --ffe-color-surface-feedback-warning: #491c00;
22
- --ffe-color-surface-feedback-critical: #640e10;
23
- --ffe-color-surface-feedback-tip: #312c44;
24
- --ffe-color-fill-primary-default: #55709b;
25
- --ffe-color-fill-primary-default-hover: #748db4;
26
- --ffe-color-fill-primary-default-pressed: #90a9d0;
27
- --ffe-color-fill-primary-selected-default: #f7fafd;
28
- --ffe-color-fill-primary-selected-hover: #d7e7f4;
29
- --ffe-color-fill-primary-selected-pressed: #c3d9ef;
30
- --ffe-color-fill-primary-subtle: #2e405c;
31
- --ffe-color-fill-primary-subtle-hover: #374b6c;
32
- --ffe-color-fill-primary-subtle-pressed: #3e5579;
33
- --ffe-color-fill-primary-invisible: #ffffff00;
34
- --ffe-color-fill-secondary-default: #457aa1;
35
- --ffe-color-fill-secondary-default-hover: #6096bd;
36
- --ffe-color-fill-secondary-default-pressed: #7eb5d2;
37
- --ffe-color-fill-secondary-subtle: #2b5a7c;
38
- --ffe-color-fill-secondary-subtle-hover: #356488;
39
- --ffe-color-fill-secondary-subtle-pressed: #3b6f96;
40
- --ffe-color-fill-tertiary-default: #7b718e;
41
- --ffe-color-fill-tertiary-default-hover: #a39db9;
42
- --ffe-color-fill-tertiary-default-pressed: #b4aecb;
43
- --ffe-color-fill-tertiary-subtle: #4e4a64;
44
- --ffe-color-fill-tertiary-subtle-hover: #5a5671;
45
- --ffe-color-fill-tertiary-subtle-pressed: #665d79;
46
- --ffe-color-fill-neutral-default: #ffffff33;
47
- --ffe-color-fill-neutral-default-hover: #ffffff40;
48
- --ffe-color-fill-neutral-default-pressed: #ffffff4d;
49
- --ffe-color-fill-neutral-subtle: #ffffff13;
50
- --ffe-color-fill-neutral-subtle-hover: #ffffff1a;
51
- --ffe-color-fill-neutral-subtle-pressed: #ffffff26;
52
- --ffe-color-fill-neutral-extra-subtle: #ffffff06;
53
- --ffe-color-fill-neutral-extra-subtle-hover: #ffffff0d;
54
- --ffe-color-fill-neutral-extra-subtle-pressed: #ffffff13;
55
- --ffe-color-fill-feedback-info: #7eb5d2;
56
- --ffe-color-fill-feedback-info-subtle: #234f71;
57
- --ffe-color-fill-feedback-success: #6abe97;
58
- --ffe-color-fill-feedback-success-subtle: #09583b;
59
- --ffe-color-fill-feedback-warning: #ea910b;
60
- --ffe-color-fill-feedback-warning-subtle: #682c00;
61
- --ffe-color-fill-feedback-critical: #ff5e5c;
62
- --ffe-color-fill-feedback-critical-subtle: #7c1214;
63
- --ffe-color-fill-feedback-tip: #c1c1dc;
64
- --ffe-color-fill-feedback-tip-subtle: #45415a;
65
- --ffe-color-foreground-default: #ffffff;
66
- --ffe-color-foreground-subtle: #c2c2c2;
67
- --ffe-color-foreground-emphasis: #d7e7f4;
68
- --ffe-color-foreground-inverse: #020a0a;
69
- --ffe-color-foreground-interactive-link: #c3d9ef;
70
- --ffe-color-foreground-interactive-link-hover: #b6d1ec;
71
- --ffe-color-foreground-interactive-link-pressed: #9ec2e5;
72
- --ffe-color-foreground-interactive-link-active: #f7fafd;
73
- --ffe-color-foreground-feedback-info: #c3dfea;
74
- --ffe-color-foreground-feedback-success: #b2e6cd;
75
- --ffe-color-foreground-feedback-warning: #ffc675;
76
- --ffe-color-foreground-feedback-critical: #ffaea8;
77
- --ffe-color-foreground-feedback-tip: #d3d3ea;
78
- --ffe-color-component-form-input-foreground-default: #ffffff;
79
- --ffe-color-component-form-input-foreground-subtle: #c2c2c2;
80
- --ffe-color-component-form-input-foreground-placeholder: #adadad;
81
- --ffe-color-component-form-input-foreground-disabled: #8f8f8f;
82
- --ffe-color-component-form-input-foreground-read-only: #c2c2c2;
83
- --ffe-color-component-form-input-foreground-error: #ffaea8;
84
- --ffe-color-component-form-input-border-active: #d7e7f4;
85
- --ffe-color-component-form-input-fill-default: #292929;
86
- --ffe-color-component-form-input-fill-default-hover: #333333;
87
- --ffe-color-component-form-input-fill-default-pressed: #3d3d3d;
88
- --ffe-color-component-form-input-fill-disabled: #5c5c5c;
89
- --ffe-color-component-form-input-fill-read-only: #474747;
90
- --ffe-color-component-form-input-fill-error: #640e10;
91
- --ffe-color-component-form-toggleswitch-handle-default: #ffffff;
92
- --ffe-color-component-form-toggleswitch-fill-default: #7a7a7a;
93
- --ffe-color-component-form-toggleswitch-fill-default-hover: #8f8f8f;
94
- --ffe-color-component-form-toggleswitch-fill-default-pressed: #adadad;
95
- --ffe-color-component-form-toggleswitch-fill-selected: #48a781;
96
- --ffe-color-component-form-toggleswitch-fill-selected-hover: #6abe97;
97
- --ffe-color-component-form-toggleswitch-fill-selected-pressed: #8fd1b1;
98
- --ffe-color-component-form-toggleswitch-fill-critical: #e44244;
99
- --ffe-color-component-button-action-border-default: #48a781;
100
- --ffe-color-component-button-action-border-hover: #6abe97;
101
- --ffe-color-component-button-action-border-pressed: #8fd1b1;
102
- --ffe-color-component-button-action-fill-default: #00754e;
103
- --ffe-color-component-button-action-fill-hover: #2a7e5b;
104
- --ffe-color-component-button-action-fill-pressed: #409674;
105
- --ffe-color-component-button-action-foreground-default: #ffffff;
106
- --ffe-color-component-button-action-foreground-hover: #ffffff;
107
- --ffe-color-component-button-primary-border-default: #9ec2e5;
108
- --ffe-color-component-button-primary-border-hover: #c3d9ef;
109
- --ffe-color-component-button-primary-border-pressed: #d7e7f4;
110
- --ffe-color-component-button-primary-fill-default: #005aa4;
111
- --ffe-color-component-button-primary-fill-hover: #1566b2;
112
- --ffe-color-component-button-primary-fill-pressed: #2975c2;
113
- --ffe-color-component-button-primary-foreground-default: #ffffff;
114
- --ffe-color-component-button-primary-foreground-hover: #ffffff;
115
- --ffe-color-component-button-secondary-border-default: #f7fafd;
116
- --ffe-color-component-button-secondary-border-hover: #f7fafd;
117
- --ffe-color-component-button-secondary-border-pressed: #f7fafd;
118
- --ffe-color-component-button-secondary-fill-default: #ffffff00;
119
- --ffe-color-component-button-secondary-fill-hover: #333333;
120
- --ffe-color-component-button-secondary-fill-pressed: #3d3d3d;
121
- --ffe-color-component-button-secondary-foreground-default: #ffffff;
122
- --ffe-color-component-button-secondary-foreground-hover: #ffffff;
123
- --ffe-color-component-button-tertiary-fill-default: #ffffff00;
124
- --ffe-color-component-button-tertiary-fill-hover: #333333;
125
- --ffe-color-component-button-tertiary-fill-pressed: #3d3d3d;
126
- --ffe-color-component-button-tertiary-foreground-default: #f7fafd;
127
- --ffe-color-component-button-tertiary-foreground-hover: #f7fafd;
128
- --ffe-color-component-logo-name: #ffffff;
129
- --ffe-color-component-logo-number1: #ffffff;
130
- --ffe-color-component-logo-circle-dark-red: #af0000;
131
- --ffe-color-component-logo-circle-light-red: #e60000;
132
- --ffe-color-border-primary-default: #ffffff26;
133
- --ffe-color-border-primary-default-hover: #ffffff33;
134
- --ffe-color-border-primary-default-pressed: #ffffff40;
135
- --ffe-color-border-primary-subtle: #ffffff13;
136
- --ffe-color-border-primary-subtle-hover: #ffffff1a;
137
- --ffe-color-border-primary-subtle-pressed: #ffffff26;
138
- --ffe-color-border-primary-emphasis: #9ec2e5;
139
- --ffe-color-border-feedback-info: #6096bd;
140
- --ffe-color-border-feedback-success: #48a781;
141
- --ffe-color-border-feedback-warning: #cc7205;
142
- --ffe-color-border-feedback-critical: #e44244;
143
- --ffe-color-border-feedback-tip: #a39db9;
144
- --ffe-color-border-interactive-focus: #ea910b;
145
- --ffe-color-border-interactive-selected: #9ec2e5;
146
- }
147
-
148
- .dark-mode .ffe-accent-mode, .dark-mode.ffe-accent-mode {
149
- --ffe-color-background-default: #141414;
150
- --ffe-color-background-subtle: #1f1f1f;
151
- --ffe-color-surface-primary-default: #292929;
152
- --ffe-color-surface-primary-default-hover: #333333;
153
- --ffe-color-surface-primary-default-pressed: #3d3d3d;
154
- --ffe-color-surface-secondary-default: #0c2232;
155
- --ffe-color-surface-secondary-default-hover: #102d43;
156
- --ffe-color-surface-secondary-default-pressed: #163853;
157
- --ffe-color-surface-tertiary-default: #1d192f;
158
- --ffe-color-surface-tertiary-default-hover: #27223a;
159
- --ffe-color-surface-tertiary-default-pressed: #312c44;
160
- --ffe-color-surface-neutral-default: #3d3d3d;
161
- --ffe-color-surface-neutral-default-hover: #474747;
162
- --ffe-color-surface-neutral-default-pressed: #525252;
163
- --ffe-color-surface-feedback-info: #163853;
164
- --ffe-color-surface-feedback-success: #0a4330;
165
- --ffe-color-surface-feedback-warning: #491c00;
166
- --ffe-color-surface-feedback-critical: #640e10;
167
- --ffe-color-surface-feedback-tip: #312c44;
168
- --ffe-color-fill-primary-default: #55709b;
169
- --ffe-color-fill-primary-default-hover: #748db4;
170
- --ffe-color-fill-primary-default-pressed: #90a9d0;
171
- --ffe-color-fill-primary-selected-default: #f7fafd;
172
- --ffe-color-fill-primary-selected-hover: #d7e7f4;
173
- --ffe-color-fill-primary-selected-pressed: #c3d9ef;
174
- --ffe-color-fill-primary-subtle: #374b6c;
175
- --ffe-color-fill-primary-subtle-hover: #3e5579;
176
- --ffe-color-fill-primary-subtle-pressed: #47618a;
177
- --ffe-color-fill-primary-invisible: #ffffff00;
178
- --ffe-color-fill-secondary-default: #457aa1;
179
- --ffe-color-fill-secondary-default-hover: #6096bd;
180
- --ffe-color-fill-secondary-default-pressed: #7eb5d2;
181
- --ffe-color-fill-secondary-subtle: #2b5a7c;
182
- --ffe-color-fill-secondary-subtle-hover: #356488;
183
- --ffe-color-fill-secondary-subtle-pressed: #3b6f96;
184
- --ffe-color-fill-tertiary-default: #7b718e;
185
- --ffe-color-fill-tertiary-default-hover: #a39db9;
186
- --ffe-color-fill-tertiary-default-pressed: #b4aecb;
187
- --ffe-color-fill-tertiary-subtle: #4e4a64;
188
- --ffe-color-fill-tertiary-subtle-hover: #5a5671;
189
- --ffe-color-fill-tertiary-subtle-pressed: #665d79;
190
- --ffe-color-fill-neutral-default: #ffffff33;
191
- --ffe-color-fill-neutral-default-hover: #ffffff40;
192
- --ffe-color-fill-neutral-default-pressed: #ffffff4d;
193
- --ffe-color-fill-neutral-subtle: #ffffff13;
194
- --ffe-color-fill-neutral-subtle-hover: #ffffff1a;
195
- --ffe-color-fill-neutral-subtle-pressed: #ffffff26;
196
- --ffe-color-fill-neutral-extra-subtle: #ffffff06;
197
- --ffe-color-fill-neutral-extra-subtle-hover: #ffffff0d;
198
- --ffe-color-fill-neutral-extra-subtle-pressed: #ffffff13;
199
- --ffe-color-fill-feedback-info: #7eb5d2;
200
- --ffe-color-fill-feedback-info-subtle: #234f71;
201
- --ffe-color-fill-feedback-success: #6abe97;
202
- --ffe-color-fill-feedback-success-subtle: #09583b;
203
- --ffe-color-fill-feedback-warning: #ea910b;
204
- --ffe-color-fill-feedback-warning-subtle: #682c00;
205
- --ffe-color-fill-feedback-critical: #ff5e5c;
206
- --ffe-color-fill-feedback-critical-subtle: #7c1214;
207
- --ffe-color-fill-feedback-tip: #c1c1dc;
208
- --ffe-color-fill-feedback-tip-subtle: #45415a;
209
- --ffe-color-foreground-default: #ffffff;
210
- --ffe-color-foreground-subtle: #c2c2c2;
211
- --ffe-color-foreground-emphasis: #d7e7f4;
212
- --ffe-color-foreground-inverse: #020a0a;
213
- --ffe-color-foreground-interactive-link: #c3d9ef;
214
- --ffe-color-foreground-interactive-link-hover: #b6d1ec;
215
- --ffe-color-foreground-interactive-link-pressed: #9ec2e5;
216
- --ffe-color-foreground-interactive-link-active: #f7fafd;
217
- --ffe-color-foreground-feedback-info: #c3dfea;
218
- --ffe-color-foreground-feedback-success: #b2e6cd;
219
- --ffe-color-foreground-feedback-warning: #ffc675;
220
- --ffe-color-foreground-feedback-critical: #ffaea8;
221
- --ffe-color-foreground-feedback-tip: #d3d3ea;
222
- --ffe-color-component-form-input-foreground-default: #ffffff;
223
- --ffe-color-component-form-input-foreground-subtle: #c2c2c2;
224
- --ffe-color-component-form-input-foreground-placeholder: #adadad;
225
- --ffe-color-component-form-input-foreground-disabled: #8f8f8f;
226
- --ffe-color-component-form-input-foreground-read-only: #c2c2c2;
227
- --ffe-color-component-form-input-foreground-error: #ffaea8;
228
- --ffe-color-component-form-input-border-active: #d7e7f4;
229
- --ffe-color-component-form-input-fill-default: #292929;
230
- --ffe-color-component-form-input-fill-default-hover: #333333;
231
- --ffe-color-component-form-input-fill-default-pressed: #3d3d3d;
232
- --ffe-color-component-form-input-fill-disabled: #5c5c5c;
233
- --ffe-color-component-form-input-fill-read-only: #474747;
234
- --ffe-color-component-form-input-fill-error: #640e10;
235
- --ffe-color-component-form-toggleswitch-handle-default: #ffffff;
236
- --ffe-color-component-form-toggleswitch-fill-default: #7a7a7a;
237
- --ffe-color-component-form-toggleswitch-fill-default-hover: #8f8f8f;
238
- --ffe-color-component-form-toggleswitch-fill-default-pressed: #adadad;
239
- --ffe-color-component-form-toggleswitch-fill-selected: #48a781;
240
- --ffe-color-component-form-toggleswitch-fill-selected-hover: #6abe97;
241
- --ffe-color-component-form-toggleswitch-fill-selected-pressed: #8fd1b1;
242
- --ffe-color-component-form-toggleswitch-fill-critical: #e44244;
243
- --ffe-color-component-button-action-border-default: #48a781;
244
- --ffe-color-component-button-action-border-hover: #6abe97;
245
- --ffe-color-component-button-action-border-pressed: #8fd1b1;
246
- --ffe-color-component-button-action-fill-default: #00754e;
247
- --ffe-color-component-button-action-fill-hover: #2a7e5b;
248
- --ffe-color-component-button-action-fill-pressed: #409674;
249
- --ffe-color-component-button-action-foreground-default: #ffffff;
250
- --ffe-color-component-button-action-foreground-hover: #ffffff;
251
- --ffe-color-component-button-primary-border-default: #9ec2e5;
252
- --ffe-color-component-button-primary-border-hover: #c3d9ef;
253
- --ffe-color-component-button-primary-border-pressed: #d7e7f4;
254
- --ffe-color-component-button-primary-fill-default: #005aa4;
255
- --ffe-color-component-button-primary-fill-hover: #1566b2;
256
- --ffe-color-component-button-primary-fill-pressed: #2975c2;
257
- --ffe-color-component-button-primary-foreground-default: #ffffff;
258
- --ffe-color-component-button-primary-foreground-hover: #ffffff;
259
- --ffe-color-component-button-secondary-border-default: #f7fafd;
260
- --ffe-color-component-button-secondary-border-hover: #f7fafd;
261
- --ffe-color-component-button-secondary-border-pressed: #f7fafd;
262
- --ffe-color-component-button-secondary-fill-default: #ffffff00;
263
- --ffe-color-component-button-secondary-fill-hover: #333333;
264
- --ffe-color-component-button-secondary-fill-pressed: #3d3d3d;
265
- --ffe-color-component-button-secondary-foreground-default: #ffffff;
266
- --ffe-color-component-button-secondary-foreground-hover: #ffffff;
267
- --ffe-color-component-button-tertiary-fill-default: #ffffff00;
268
- --ffe-color-component-button-tertiary-fill-hover: #333333;
269
- --ffe-color-component-button-tertiary-fill-pressed: #3d3d3d;
270
- --ffe-color-component-button-tertiary-foreground-default: #f7fafd;
271
- --ffe-color-component-button-tertiary-foreground-hover: #f7fafd;
272
- --ffe-color-component-logo-name: #ffffff;
273
- --ffe-color-component-logo-number1: #ffffff;
274
- --ffe-color-component-logo-circle-dark-red: #af0000;
275
- --ffe-color-component-logo-circle-light-red: #e60000;
276
- --ffe-color-border-primary-default: #ffffff26;
277
- --ffe-color-border-primary-default-hover: #ffffff33;
278
- --ffe-color-border-primary-default-pressed: #ffffff40;
279
- --ffe-color-border-primary-subtle: #ffffff13;
280
- --ffe-color-border-primary-subtle-hover: #ffffff1a;
281
- --ffe-color-border-primary-subtle-pressed: #ffffff26;
282
- --ffe-color-border-primary-emphasis: #9ec2e5;
283
- --ffe-color-border-feedback-info: #6096bd;
284
- --ffe-color-border-feedback-success: #48a781;
285
- --ffe-color-border-feedback-warning: #cc7205;
286
- --ffe-color-border-feedback-critical: #e44244;
287
- --ffe-color-border-feedback-tip: #a39db9;
288
- --ffe-color-border-interactive-focus: #f49f1f;
289
- --ffe-color-border-interactive-selected: #9ec2e5;
290
- }