@fkui/theme-default 6.28.0 → 6.30.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 (19) hide show
  1. package/dist/deprecated-variables.json +21 -1
  2. package/dist/fkui-css-variables-deprecated.css +20 -0
  3. package/dist/fkui-css-variables-deprecated.js +21 -1
  4. package/dist/fkui-css-variables.css +5 -21
  5. package/dist/fkui-css-variables.js +5 -21
  6. package/dist/metadata.mjs +56 -0
  7. package/dist/theme-auto.css +11 -43
  8. package/dist/theme-auto.js +1 -1
  9. package/dist/theme-dark.css +5 -21
  10. package/dist/theme-dark.js +5 -21
  11. package/dist/theme-light.css +5 -21
  12. package/dist/theme-light.js +5 -21
  13. package/package.json +3 -3
  14. package/src/_version.scss +1 -1
  15. package/src/dark/_variables.scss +8 -0
  16. package/src/deprecated-variables.json +21 -1
  17. package/src/fkui-css-variables-deprecated.scss +22 -0
  18. package/src/light/_variables.scss +8 -0
  19. package/src/shared/_index.scss +1 -30
package/dist/deprecated-variables.json CHANGED
@@ -261,5 +261,25 @@
261
261
  "--f-background-grid-active",
262
262
  "--f-background-tab-active",
263
263
  "--f-background-tab-inactive",
264
- "--f-background-button-discrete-hover"
264
+ "--f-background-button-discrete-hover",
265
+ "--f-background-menu",
266
+ "--f-background-menu-vertical-hover",
267
+ "--f-background-menu-vertical-highlight",
268
+ "--f-text-color-menu",
269
+ "--f-text-color-menu-hover",
270
+ "--f-text-color-menu-horizontal-highlight",
271
+ "--f-border-color-menu-horizontal",
272
+ "--f-border-color-menu-horizontal-hover",
273
+ "--f-border-color-menu-horizontal-highlight",
274
+ "--f-background-popupmenu",
275
+ "--f-background-popupmenu-vertical-hover",
276
+ "--f-background-popupmenu-vertical-highlight",
277
+ "--f-border-color-popupmenu",
278
+ "--f-text-color-popupmenu",
279
+ "--f-text-color-popupmenu-hover",
280
+ "--f-border-color-separator-contextmenu",
281
+ "--f-background-heading-static-panel",
282
+ "--f-border-color-panel",
283
+ "--f-border-color-static-panel",
284
+ "--f-static-panel-heading-border"
265
285
  ]
package/dist/fkui-css-variables-deprecated.css CHANGED
@@ -263,4 +263,24 @@
263
263
  --f-expandable-panel-heading-border-open:none;
264
264
  --f-expandable-panel-heading-border-close:none;
265
265
  --f-expandable-panel-heading-border-radius:4px 4px 0 0;
266
+ --f-background-menu:#f4f4f4;
267
+ --f-background-menu-vertical-hover:#ddddde;
268
+ --f-background-menu-vertical-highlight:#e7f0e9;
269
+ --f-text-color-menu:#1b1e23;
270
+ --f-text-color-menu-hover:#1b1e23;
271
+ --f-text-color-menu-horizontal-highlight:#1b1e23;
272
+ --f-border-color-menu-horizontal:#116a3e;
273
+ --f-border-color-menu-horizontal-hover:#afcfb5;
274
+ --f-border-color-menu-horizontal-highlight:#116a3e;
275
+ --f-background-popupmenu:#fff;
276
+ --f-background-popupmenu-vertical-hover:#ddddde;
277
+ --f-background-popupmenu-vertical-highlight:#e7f0e9;
278
+ --f-border-color-popupmenu:#ddddde;
279
+ --f-text-color-popupmenu:#1b1e23;
280
+ --f-text-color-popupmenu-hover:#1b1e23;
281
+ --f-border-color-separator-contextmenu:#8d8e91;
282
+ --f-background-heading-static-panel:#afcfb5;
283
+ --f-border-color-panel:#e7f0e9;
284
+ --f-border-color-static-panel:#afcfb5;
285
+ --f-static-panel-heading-border:none;
266
286
  }
package/dist/fkui-css-variables-deprecated.js CHANGED
@@ -262,6 +262,26 @@ const value = {
262
262
  "--f-border-color-expandable-panel-closed": "none",
263
263
  "--f-expandable-panel-heading-border-open": "none",
264
264
  "--f-expandable-panel-heading-border-close": "none",
265
- "--f-expandable-panel-heading-border-radius": "4px 4px 0 0"
265
+ "--f-expandable-panel-heading-border-radius": "4px 4px 0 0",
266
+ "--f-background-menu": "#f4f4f4",
267
+ "--f-background-menu-vertical-hover": "#ddddde",
268
+ "--f-background-menu-vertical-highlight": "#e7f0e9",
269
+ "--f-text-color-menu": "#1b1e23",
270
+ "--f-text-color-menu-hover": "#1b1e23",
271
+ "--f-text-color-menu-horizontal-highlight": "#1b1e23",
272
+ "--f-border-color-menu-horizontal": "#116a3e",
273
+ "--f-border-color-menu-horizontal-hover": "#afcfb5",
274
+ "--f-border-color-menu-horizontal-highlight": "#116a3e",
275
+ "--f-background-popupmenu": "#fff",
276
+ "--f-background-popupmenu-vertical-hover": "#ddddde",
277
+ "--f-background-popupmenu-vertical-highlight": "#e7f0e9",
278
+ "--f-border-color-popupmenu": "#ddddde",
279
+ "--f-text-color-popupmenu": "#1b1e23",
280
+ "--f-text-color-popupmenu-hover": "#1b1e23",
281
+ "--f-border-color-separator-contextmenu": "#8d8e91",
282
+ "--f-background-heading-static-panel": "#afcfb5",
283
+ "--f-border-color-panel": "#e7f0e9",
284
+ "--f-border-color-static-panel": "#afcfb5",
285
+ "--f-static-panel-heading-border": "none"
266
286
  };
267
287
  module.exports = value;
package/dist/fkui-css-variables.css CHANGED
@@ -9,37 +9,18 @@
9
9
  --f-text-color-heading-4:inherit;
10
10
  --f-text-color-heading-5:inherit;
11
11
  --f-text-color-heading-6:inherit;
12
- --f-text-color-menu:#1b1e23;
13
- --f-text-color-menu-hover:#1b1e23;
14
- --f-text-color-menu-horizontal-highlight:#1b1e23;
15
- --f-text-color-popupmenu:#1b1e23;
16
- --f-text-color-popupmenu-hover:#1b1e23;
17
12
  --f-icon-color-success:#35805b;
18
13
  --f-icon-color-success-background:#dbe9e2;
19
14
  --f-background-overlay:rgba(0,0,0,.75);
20
15
  --f-background-pageheader-primary:#116a3e;
21
16
  --f-background-skiplink-focus:#f5f6fa;
22
- --f-background-heading-static-panel:#afcfb5;
23
17
  --f-background-sidepanel-button-tertiary-hover:#e5e5f5;
24
- --f-background-menu:#f4f4f4;
25
- --f-background-menu-vertical-hover:#ddddde;
26
- --f-background-menu-vertical-highlight:#e7f0e9;
27
- --f-background-popupmenu:#fff;
28
- --f-background-popupmenu-vertical-hover:#ddddde;
29
- --f-background-popupmenu-vertical-highlight:#e7f0e9;
30
- --f-border-color-panel:#e7f0e9;
31
- --f-border-color-static-panel:#afcfb5;
32
18
  --f-border-color-separator:#ddddde;
33
19
  --f-border-color-separator-pageheader-primary:#fff;
34
- --f-border-color-separator-contextmenu:#8d8e91;
35
20
  --f-border-color-link:#4a52b6;
36
21
  --f-border-color-link-hover:#8d8e91;
37
22
  --f-border-color-link-discrete:#8d8e91;
38
23
  --f-border-color-link-discrete-hover:#4a52b6;
39
- --f-border-color-menu-horizontal:#116a3e;
40
- --f-border-color-menu-horizontal-hover:#afcfb5;
41
- --f-border-color-menu-horizontal-highlight:#116a3e;
42
- --f-border-color-popupmenu:#ddddde;
43
24
  --f-box-modal-shadow:0 0 20px rgba(0,0,0,.3);
44
25
  --f-input-shadow-inset:inset 0 2px 3px rgba(0,0,0,.1);
45
26
  --f-font-family:"ExpFont", "NeueHass", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
@@ -82,7 +63,6 @@
82
63
  --f-animation-expand-open:all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96) 0s;
83
64
  --f-animation-expand-close:all 500ms cubic-bezier(0.46, 0.03, 0.52, 0.96) 0s;
84
65
  --f-density-factor:1;
85
- --f-static-panel-heading-border:none;
86
66
  --f-label-message-margin-top:0.25rem;
87
67
  --f-button-shadow:0 1px 3px rgba(0,0,0,.3);
88
68
  --f-button-shadow-hover:0 1px 3px rgba(0,0,0,.3);
@@ -207,5 +187,9 @@
207
187
  --fkds-color-select-background-secondary-hover:#dbe9e2;
208
188
  --fkds-color-select-background-secondary-active:#dbe9e2;
209
189
  --fkds-color-select-background-secondary-focus:#dbe9e2;
210
- --fkui-theme-default-version:"6.28.0";
190
+ --fkds-color-navigation-border-hover:#88b49f;
191
+ --fkds-color-navigation-border-selected:#35805b;
192
+ --fkds-color-navigation-background-hover:#dbe9e2;
193
+ --fkds-color-navigation-background-selected:#35805b;
194
+ --fkui-theme-default-version:"6.30.0";
211
195
  }
package/dist/fkui-css-variables.js CHANGED
@@ -9,37 +9,18 @@ const value = {
9
9
  "--f-text-color-heading-4": "inherit",
10
10
  "--f-text-color-heading-5": "inherit",
11
11
  "--f-text-color-heading-6": "inherit",
12
- "--f-text-color-menu": "#1b1e23",
13
- "--f-text-color-menu-hover": "#1b1e23",
14
- "--f-text-color-menu-horizontal-highlight": "#1b1e23",
15
- "--f-text-color-popupmenu": "#1b1e23",
16
- "--f-text-color-popupmenu-hover": "#1b1e23",
17
12
  "--f-icon-color-success": "#35805b",
18
13
  "--f-icon-color-success-background": "#dbe9e2",
19
14
  "--f-background-overlay": "rgba(0,0,0,.75)",
20
15
  "--f-background-pageheader-primary": "#116a3e",
21
16
  "--f-background-skiplink-focus": "#f5f6fa",
22
- "--f-background-heading-static-panel": "#afcfb5",
23
17
  "--f-background-sidepanel-button-tertiary-hover": "#e5e5f5",
24
- "--f-background-menu": "#f4f4f4",
25
- "--f-background-menu-vertical-hover": "#ddddde",
26
- "--f-background-menu-vertical-highlight": "#e7f0e9",
27
- "--f-background-popupmenu": "#fff",
28
- "--f-background-popupmenu-vertical-hover": "#ddddde",
29
- "--f-background-popupmenu-vertical-highlight": "#e7f0e9",
30
- "--f-border-color-panel": "#e7f0e9",
31
- "--f-border-color-static-panel": "#afcfb5",
32
18
  "--f-border-color-separator": "#ddddde",
33
19
  "--f-border-color-separator-pageheader-primary": "#fff",
34
- "--f-border-color-separator-contextmenu": "#8d8e91",
35
20
  "--f-border-color-link": "#4a52b6",
36
21
  "--f-border-color-link-hover": "#8d8e91",
37
22
  "--f-border-color-link-discrete": "#8d8e91",
38
23
  "--f-border-color-link-discrete-hover": "#4a52b6",
39
- "--f-border-color-menu-horizontal": "#116a3e",
40
- "--f-border-color-menu-horizontal-hover": "#afcfb5",
41
- "--f-border-color-menu-horizontal-highlight": "#116a3e",
42
- "--f-border-color-popupmenu": "#ddddde",
43
24
  "--f-box-modal-shadow": "0 0 20px rgba(0,0,0,.3)",
44
25
  "--f-input-shadow-inset": "inset 0 2px 3px rgba(0,0,0,.1)",
45
26
  "--f-font-family": "\"ExpFont\", \"NeueHass\", \"Helvetica Neue\", \"Helvetica\", \"Roboto\", \"Arial\", sans-serif",
@@ -82,7 +63,6 @@ const value = {
82
63
  "--f-animation-expand-open": "all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96) 0s",
83
64
  "--f-animation-expand-close": "all 500ms cubic-bezier(0.46, 0.03, 0.52, 0.96) 0s",
84
65
  "--f-density-factor": "1",
85
- "--f-static-panel-heading-border": "none",
86
66
  "--f-label-message-margin-top": "0.25rem",
87
67
  "--f-button-shadow": "0 1px 3px rgba(0,0,0,.3)",
88
68
  "--f-button-shadow-hover": "0 1px 3px rgba(0,0,0,.3)",
@@ -207,6 +187,10 @@ const value = {
207
187
  "--fkds-color-select-background-secondary-hover": "#dbe9e2",
208
188
  "--fkds-color-select-background-secondary-active": "#dbe9e2",
209
189
  "--fkds-color-select-background-secondary-focus": "#dbe9e2",
210
- "--fkui-theme-default-version": "\"6.28.0\""
190
+ "--fkds-color-navigation-border-hover": "#88b49f",
191
+ "--fkds-color-navigation-border-selected": "#35805b",
192
+ "--fkds-color-navigation-background-hover": "#dbe9e2",
193
+ "--fkds-color-navigation-background-selected": "#35805b",
194
+ "--fkui-theme-default-version": "\"6.30.0\""
211
195
  };
212
196
  module.exports = value;
package/dist/metadata.mjs CHANGED
@@ -704,6 +704,62 @@ export default {
704
704
  }
705
705
  }
706
706
  },
707
+ {
708
+ "name": "--fkds-color-navigation-background-hover",
709
+ "comment": null,
710
+ "values": {
711
+ "light": {
712
+ "value": "#dbe9e2",
713
+ "palette": "green-a-15"
714
+ },
715
+ "dark": {
716
+ "value": "#88b49f",
717
+ "palette": "green-a-50"
718
+ }
719
+ }
720
+ },
721
+ {
722
+ "name": "--fkds-color-navigation-background-selected",
723
+ "comment": null,
724
+ "values": {
725
+ "light": {
726
+ "value": "#35805b",
727
+ "palette": "green-a-85"
728
+ },
729
+ "dark": {
730
+ "value": "#35805b",
731
+ "palette": "green-a-85"
732
+ }
733
+ }
734
+ },
735
+ {
736
+ "name": "--fkds-color-navigation-border-hover",
737
+ "comment": null,
738
+ "values": {
739
+ "light": {
740
+ "value": "#88b49f",
741
+ "palette": "green-a-50"
742
+ },
743
+ "dark": {
744
+ "value": "#dbe9e2",
745
+ "palette": "green-a-15"
746
+ }
747
+ }
748
+ },
749
+ {
750
+ "name": "--fkds-color-navigation-border-selected",
751
+ "comment": null,
752
+ "values": {
753
+ "light": {
754
+ "value": "#35805b",
755
+ "palette": "green-a-85"
756
+ },
757
+ "dark": {
758
+ "value": "#35805b",
759
+ "palette": "green-a-85"
760
+ }
761
+ }
762
+ },
707
763
  {
708
764
  "name": "--fkds-color-select-background-primary-active",
709
765
  "comment": null,
package/dist/theme-auto.css CHANGED
@@ -13,37 +13,18 @@
13
13
  --f-text-color-heading-4:inherit;
14
14
  --f-text-color-heading-5:inherit;
15
15
  --f-text-color-heading-6:inherit;
16
- --f-text-color-menu:#1b1e23;
17
- --f-text-color-menu-hover:#1b1e23;
18
- --f-text-color-menu-horizontal-highlight:#1b1e23;
19
- --f-text-color-popupmenu:#1b1e23;
20
- --f-text-color-popupmenu-hover:#1b1e23;
21
16
  --f-icon-color-success:#35805b;
22
17
  --f-icon-color-success-background:#dbe9e2;
23
18
  --f-background-overlay:rgba(0,0,0,.75);
24
19
  --f-background-pageheader-primary:#116a3e;
25
20
  --f-background-skiplink-focus:#f5f6fa;
26
- --f-background-heading-static-panel:#afcfb5;
27
21
  --f-background-sidepanel-button-tertiary-hover:#e5e5f5;
28
- --f-background-menu:#f4f4f4;
29
- --f-background-menu-vertical-hover:#ddddde;
30
- --f-background-menu-vertical-highlight:#e7f0e9;
31
- --f-background-popupmenu:#fff;
32
- --f-background-popupmenu-vertical-hover:#ddddde;
33
- --f-background-popupmenu-vertical-highlight:#e7f0e9;
34
- --f-border-color-panel:#e7f0e9;
35
- --f-border-color-static-panel:#afcfb5;
36
22
  --f-border-color-separator:#ddddde;
37
23
  --f-border-color-separator-pageheader-primary:#fff;
38
- --f-border-color-separator-contextmenu:#8d8e91;
39
24
  --f-border-color-link:#4a52b6;
40
25
  --f-border-color-link-hover:#8d8e91;
41
26
  --f-border-color-link-discrete:#8d8e91;
42
27
  --f-border-color-link-discrete-hover:#4a52b6;
43
- --f-border-color-menu-horizontal:#116a3e;
44
- --f-border-color-menu-horizontal-hover:#afcfb5;
45
- --f-border-color-menu-horizontal-highlight:#116a3e;
46
- --f-border-color-popupmenu:#ddddde;
47
28
  --f-box-modal-shadow:0 0 20px rgba(0,0,0,.3);
48
29
  --f-input-shadow-inset:inset 0 2px 3px rgba(0,0,0,.1);
49
30
  --f-font-family:"ExpFont", "NeueHass", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
@@ -86,7 +67,6 @@
86
67
  --f-animation-expand-open:all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96) 0s;
87
68
  --f-animation-expand-close:all 500ms cubic-bezier(0.46, 0.03, 0.52, 0.96) 0s;
88
69
  --f-density-factor:1;
89
- --f-static-panel-heading-border:none;
90
70
  --f-label-message-margin-top:0.25rem;
91
71
  --f-button-shadow:0 1px 3px rgba(0,0,0,.3);
92
72
  --f-button-shadow-hover:0 1px 3px rgba(0,0,0,.3);
@@ -211,7 +191,11 @@
211
191
  --fkds-color-select-background-secondary-hover:#dbe9e2;
212
192
  --fkds-color-select-background-secondary-active:#dbe9e2;
213
193
  --fkds-color-select-background-secondary-focus:#dbe9e2;
214
- --fkui-theme-default-version:"6.28.0";
194
+ --fkds-color-navigation-border-hover:#88b49f;
195
+ --fkds-color-navigation-border-selected:#35805b;
196
+ --fkds-color-navigation-background-hover:#dbe9e2;
197
+ --fkds-color-navigation-background-selected:#35805b;
198
+ --fkui-theme-default-version:"6.30.0";
215
199
  }
216
200
  }
217
201
  @media (prefers-color-scheme:dark){
@@ -226,37 +210,18 @@
226
210
  --f-text-color-heading-4:inherit;
227
211
  --f-text-color-heading-5:inherit;
228
212
  --f-text-color-heading-6:inherit;
229
- --f-text-color-menu:#1b1e23;
230
- --f-text-color-menu-hover:#1b1e23;
231
- --f-text-color-menu-horizontal-highlight:#1b1e23;
232
- --f-text-color-popupmenu:#1b1e23;
233
- --f-text-color-popupmenu-hover:#1b1e23;
234
213
  --f-icon-color-success:#35805b;
235
214
  --f-icon-color-success-background:#dbe9e2;
236
215
  --f-background-overlay:rgba(0,0,0,.75);
237
216
  --f-background-pageheader-primary:#116a3e;
238
217
  --f-background-skiplink-focus:#f5f6fa;
239
- --f-background-heading-static-panel:#afcfb5;
240
218
  --f-background-sidepanel-button-tertiary-hover:#e5e5f5;
241
- --f-background-menu:#f4f4f4;
242
- --f-background-menu-vertical-hover:#ddddde;
243
- --f-background-menu-vertical-highlight:#e7f0e9;
244
- --f-background-popupmenu:#fff;
245
- --f-background-popupmenu-vertical-hover:#ddddde;
246
- --f-background-popupmenu-vertical-highlight:#e7f0e9;
247
- --f-border-color-panel:#e7f0e9;
248
- --f-border-color-static-panel:#afcfb5;
249
219
  --f-border-color-separator:#ddddde;
250
220
  --f-border-color-separator-pageheader-primary:#fff;
251
- --f-border-color-separator-contextmenu:#8d8e91;
252
221
  --f-border-color-link:#4a52b6;
253
222
  --f-border-color-link-hover:#8d8e91;
254
223
  --f-border-color-link-discrete:#8d8e91;
255
224
  --f-border-color-link-discrete-hover:#4a52b6;
256
- --f-border-color-menu-horizontal:#116a3e;
257
- --f-border-color-menu-horizontal-hover:#afcfb5;
258
- --f-border-color-menu-horizontal-highlight:#116a3e;
259
- --f-border-color-popupmenu:#ddddde;
260
225
  --f-box-modal-shadow:0 0 20px rgba(0,0,0,.3);
261
226
  --f-input-shadow-inset:inset 0 2px 3px rgba(0,0,0,.1);
262
227
  --f-font-family:"ExpFont", "NeueHass", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
@@ -299,7 +264,6 @@
299
264
  --f-animation-expand-open:all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96) 0s;
300
265
  --f-animation-expand-close:all 500ms cubic-bezier(0.46, 0.03, 0.52, 0.96) 0s;
301
266
  --f-density-factor:1;
302
- --f-static-panel-heading-border:none;
303
267
  --f-label-message-margin-top:0.25rem;
304
268
  --f-button-shadow:0 1px 3px rgba(0,0,0,.3);
305
269
  --f-button-shadow-hover:0 1px 3px rgba(0,0,0,.3);
@@ -424,9 +388,13 @@
424
388
  --fkds-color-select-background-secondary-hover:#35805b;
425
389
  --fkds-color-select-background-secondary-active:#35805b;
426
390
  --fkds-color-select-background-secondary-focus:#35805b;
427
- --fkui-theme-default-version:"6.28.0";
391
+ --fkds-color-navigation-border-hover:#dbe9e2;
392
+ --fkds-color-navigation-border-selected:#35805b;
393
+ --fkds-color-navigation-background-hover:#88b49f;
394
+ --fkds-color-navigation-background-selected:#35805b;
395
+ --fkui-theme-default-version:"6.30.0";
428
396
  }
429
397
  }
430
398
  :root{
431
- --fkui-theme-default-version:"6.28.0";
399
+ --fkui-theme-default-version:"6.30.0";
432
400
  }
package/dist/theme-auto.js CHANGED
@@ -1,4 +1,4 @@
1
1
  const value = {
2
- "--fkui-theme-default-version": "\"6.28.0\""
2
+ "--fkui-theme-default-version": "\"6.30.0\""
3
3
  };
4
4
  module.exports = value;
package/dist/theme-dark.css CHANGED
@@ -9,37 +9,18 @@
9
9
  --f-text-color-heading-4:inherit;
10
10
  --f-text-color-heading-5:inherit;
11
11
  --f-text-color-heading-6:inherit;
12
- --f-text-color-menu:#1b1e23;
13
- --f-text-color-menu-hover:#1b1e23;
14
- --f-text-color-menu-horizontal-highlight:#1b1e23;
15
- --f-text-color-popupmenu:#1b1e23;
16
- --f-text-color-popupmenu-hover:#1b1e23;
17
12
  --f-icon-color-success:#35805b;
18
13
  --f-icon-color-success-background:#dbe9e2;
19
14
  --f-background-overlay:rgba(0,0,0,.75);
20
15
  --f-background-pageheader-primary:#116a3e;
21
16
  --f-background-skiplink-focus:#f5f6fa;
22
- --f-background-heading-static-panel:#afcfb5;
23
17
  --f-background-sidepanel-button-tertiary-hover:#e5e5f5;
24
- --f-background-menu:#f4f4f4;
25
- --f-background-menu-vertical-hover:#ddddde;
26
- --f-background-menu-vertical-highlight:#e7f0e9;
27
- --f-background-popupmenu:#fff;
28
- --f-background-popupmenu-vertical-hover:#ddddde;
29
- --f-background-popupmenu-vertical-highlight:#e7f0e9;
30
- --f-border-color-panel:#e7f0e9;
31
- --f-border-color-static-panel:#afcfb5;
32
18
  --f-border-color-separator:#ddddde;
33
19
  --f-border-color-separator-pageheader-primary:#fff;
34
- --f-border-color-separator-contextmenu:#8d8e91;
35
20
  --f-border-color-link:#4a52b6;
36
21
  --f-border-color-link-hover:#8d8e91;
37
22
  --f-border-color-link-discrete:#8d8e91;
38
23
  --f-border-color-link-discrete-hover:#4a52b6;
39
- --f-border-color-menu-horizontal:#116a3e;
40
- --f-border-color-menu-horizontal-hover:#afcfb5;
41
- --f-border-color-menu-horizontal-highlight:#116a3e;
42
- --f-border-color-popupmenu:#ddddde;
43
24
  --f-box-modal-shadow:0 0 20px rgba(0,0,0,.3);
44
25
  --f-input-shadow-inset:inset 0 2px 3px rgba(0,0,0,.1);
45
26
  --f-font-family:"ExpFont", "NeueHass", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
@@ -82,7 +63,6 @@
82
63
  --f-animation-expand-open:all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96) 0s;
83
64
  --f-animation-expand-close:all 500ms cubic-bezier(0.46, 0.03, 0.52, 0.96) 0s;
84
65
  --f-density-factor:1;
85
- --f-static-panel-heading-border:none;
86
66
  --f-label-message-margin-top:0.25rem;
87
67
  --f-button-shadow:0 1px 3px rgba(0,0,0,.3);
88
68
  --f-button-shadow-hover:0 1px 3px rgba(0,0,0,.3);
@@ -207,5 +187,9 @@
207
187
  --fkds-color-select-background-secondary-hover:#35805b;
208
188
  --fkds-color-select-background-secondary-active:#35805b;
209
189
  --fkds-color-select-background-secondary-focus:#35805b;
210
- --fkui-theme-default-version:"6.28.0";
190
+ --fkds-color-navigation-border-hover:#dbe9e2;
191
+ --fkds-color-navigation-border-selected:#35805b;
192
+ --fkds-color-navigation-background-hover:#88b49f;
193
+ --fkds-color-navigation-background-selected:#35805b;
194
+ --fkui-theme-default-version:"6.30.0";
211
195
  }
package/dist/theme-dark.js CHANGED
@@ -9,37 +9,18 @@ const value = {
9
9
  "--f-text-color-heading-4": "inherit",
10
10
  "--f-text-color-heading-5": "inherit",
11
11
  "--f-text-color-heading-6": "inherit",
12
- "--f-text-color-menu": "#1b1e23",
13
- "--f-text-color-menu-hover": "#1b1e23",
14
- "--f-text-color-menu-horizontal-highlight": "#1b1e23",
15
- "--f-text-color-popupmenu": "#1b1e23",
16
- "--f-text-color-popupmenu-hover": "#1b1e23",
17
12
  "--f-icon-color-success": "#35805b",
18
13
  "--f-icon-color-success-background": "#dbe9e2",
19
14
  "--f-background-overlay": "rgba(0,0,0,.75)",
20
15
  "--f-background-pageheader-primary": "#116a3e",
21
16
  "--f-background-skiplink-focus": "#f5f6fa",
22
- "--f-background-heading-static-panel": "#afcfb5",
23
17
  "--f-background-sidepanel-button-tertiary-hover": "#e5e5f5",
24
- "--f-background-menu": "#f4f4f4",
25
- "--f-background-menu-vertical-hover": "#ddddde",
26
- "--f-background-menu-vertical-highlight": "#e7f0e9",
27
- "--f-background-popupmenu": "#fff",
28
- "--f-background-popupmenu-vertical-hover": "#ddddde",
29
- "--f-background-popupmenu-vertical-highlight": "#e7f0e9",
30
- "--f-border-color-panel": "#e7f0e9",
31
- "--f-border-color-static-panel": "#afcfb5",
32
18
  "--f-border-color-separator": "#ddddde",
33
19
  "--f-border-color-separator-pageheader-primary": "#fff",
34
- "--f-border-color-separator-contextmenu": "#8d8e91",
35
20
  "--f-border-color-link": "#4a52b6",
36
21
  "--f-border-color-link-hover": "#8d8e91",
37
22
  "--f-border-color-link-discrete": "#8d8e91",
38
23
  "--f-border-color-link-discrete-hover": "#4a52b6",
39
- "--f-border-color-menu-horizontal": "#116a3e",
40
- "--f-border-color-menu-horizontal-hover": "#afcfb5",
41
- "--f-border-color-menu-horizontal-highlight": "#116a3e",
42
- "--f-border-color-popupmenu": "#ddddde",
43
24
  "--f-box-modal-shadow": "0 0 20px rgba(0,0,0,.3)",
44
25
  "--f-input-shadow-inset": "inset 0 2px 3px rgba(0,0,0,.1)",
45
26
  "--f-font-family": "\"ExpFont\", \"NeueHass\", \"Helvetica Neue\", \"Helvetica\", \"Roboto\", \"Arial\", sans-serif",
@@ -82,7 +63,6 @@ const value = {
82
63
  "--f-animation-expand-open": "all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96) 0s",
83
64
  "--f-animation-expand-close": "all 500ms cubic-bezier(0.46, 0.03, 0.52, 0.96) 0s",
84
65
  "--f-density-factor": "1",
85
- "--f-static-panel-heading-border": "none",
86
66
  "--f-label-message-margin-top": "0.25rem",
87
67
  "--f-button-shadow": "0 1px 3px rgba(0,0,0,.3)",
88
68
  "--f-button-shadow-hover": "0 1px 3px rgba(0,0,0,.3)",
@@ -207,6 +187,10 @@ const value = {
207
187
  "--fkds-color-select-background-secondary-hover": "#35805b",
208
188
  "--fkds-color-select-background-secondary-active": "#35805b",
209
189
  "--fkds-color-select-background-secondary-focus": "#35805b",
210
- "--fkui-theme-default-version": "\"6.28.0\""
190
+ "--fkds-color-navigation-border-hover": "#dbe9e2",
191
+ "--fkds-color-navigation-border-selected": "#35805b",
192
+ "--fkds-color-navigation-background-hover": "#88b49f",
193
+ "--fkds-color-navigation-background-selected": "#35805b",
194
+ "--fkui-theme-default-version": "\"6.30.0\""
211
195
  };
212
196
  module.exports = value;
package/dist/theme-light.css CHANGED
@@ -9,37 +9,18 @@
9
9
  --f-text-color-heading-4:inherit;
10
10
  --f-text-color-heading-5:inherit;
11
11
  --f-text-color-heading-6:inherit;
12
- --f-text-color-menu:#1b1e23;
13
- --f-text-color-menu-hover:#1b1e23;
14
- --f-text-color-menu-horizontal-highlight:#1b1e23;
15
- --f-text-color-popupmenu:#1b1e23;
16
- --f-text-color-popupmenu-hover:#1b1e23;
17
12
  --f-icon-color-success:#35805b;
18
13
  --f-icon-color-success-background:#dbe9e2;
19
14
  --f-background-overlay:rgba(0,0,0,.75);
20
15
  --f-background-pageheader-primary:#116a3e;
21
16
  --f-background-skiplink-focus:#f5f6fa;
22
- --f-background-heading-static-panel:#afcfb5;
23
17
  --f-background-sidepanel-button-tertiary-hover:#e5e5f5;
24
- --f-background-menu:#f4f4f4;
25
- --f-background-menu-vertical-hover:#ddddde;
26
- --f-background-menu-vertical-highlight:#e7f0e9;
27
- --f-background-popupmenu:#fff;
28
- --f-background-popupmenu-vertical-hover:#ddddde;
29
- --f-background-popupmenu-vertical-highlight:#e7f0e9;
30
- --f-border-color-panel:#e7f0e9;
31
- --f-border-color-static-panel:#afcfb5;
32
18
  --f-border-color-separator:#ddddde;
33
19
  --f-border-color-separator-pageheader-primary:#fff;
34
- --f-border-color-separator-contextmenu:#8d8e91;
35
20
  --f-border-color-link:#4a52b6;
36
21
  --f-border-color-link-hover:#8d8e91;
37
22
  --f-border-color-link-discrete:#8d8e91;
38
23
  --f-border-color-link-discrete-hover:#4a52b6;
39
- --f-border-color-menu-horizontal:#116a3e;
40
- --f-border-color-menu-horizontal-hover:#afcfb5;
41
- --f-border-color-menu-horizontal-highlight:#116a3e;
42
- --f-border-color-popupmenu:#ddddde;
43
24
  --f-box-modal-shadow:0 0 20px rgba(0,0,0,.3);
44
25
  --f-input-shadow-inset:inset 0 2px 3px rgba(0,0,0,.1);
45
26
  --f-font-family:"ExpFont", "NeueHass", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
@@ -82,7 +63,6 @@
82
63
  --f-animation-expand-open:all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96) 0s;
83
64
  --f-animation-expand-close:all 500ms cubic-bezier(0.46, 0.03, 0.52, 0.96) 0s;
84
65
  --f-density-factor:1;
85
- --f-static-panel-heading-border:none;
86
66
  --f-label-message-margin-top:0.25rem;
87
67
  --f-button-shadow:0 1px 3px rgba(0,0,0,.3);
88
68
  --f-button-shadow-hover:0 1px 3px rgba(0,0,0,.3);
@@ -207,5 +187,9 @@
207
187
  --fkds-color-select-background-secondary-hover:#dbe9e2;
208
188
  --fkds-color-select-background-secondary-active:#dbe9e2;
209
189
  --fkds-color-select-background-secondary-focus:#dbe9e2;
210
- --fkui-theme-default-version:"6.28.0";
190
+ --fkds-color-navigation-border-hover:#88b49f;
191
+ --fkds-color-navigation-border-selected:#35805b;
192
+ --fkds-color-navigation-background-hover:#dbe9e2;
193
+ --fkds-color-navigation-background-selected:#35805b;
194
+ --fkui-theme-default-version:"6.30.0";
211
195
  }
package/dist/theme-light.js CHANGED
@@ -9,37 +9,18 @@ const value = {
9
9
  "--f-text-color-heading-4": "inherit",
10
10
  "--f-text-color-heading-5": "inherit",
11
11
  "--f-text-color-heading-6": "inherit",
12
- "--f-text-color-menu": "#1b1e23",
13
- "--f-text-color-menu-hover": "#1b1e23",
14
- "--f-text-color-menu-horizontal-highlight": "#1b1e23",
15
- "--f-text-color-popupmenu": "#1b1e23",
16
- "--f-text-color-popupmenu-hover": "#1b1e23",
17
12
  "--f-icon-color-success": "#35805b",
18
13
  "--f-icon-color-success-background": "#dbe9e2",
19
14
  "--f-background-overlay": "rgba(0,0,0,.75)",
20
15
  "--f-background-pageheader-primary": "#116a3e",
21
16
  "--f-background-skiplink-focus": "#f5f6fa",
22
- "--f-background-heading-static-panel": "#afcfb5",
23
17
  "--f-background-sidepanel-button-tertiary-hover": "#e5e5f5",
24
- "--f-background-menu": "#f4f4f4",
25
- "--f-background-menu-vertical-hover": "#ddddde",
26
- "--f-background-menu-vertical-highlight": "#e7f0e9",
27
- "--f-background-popupmenu": "#fff",
28
- "--f-background-popupmenu-vertical-hover": "#ddddde",
29
- "--f-background-popupmenu-vertical-highlight": "#e7f0e9",
30
- "--f-border-color-panel": "#e7f0e9",
31
- "--f-border-color-static-panel": "#afcfb5",
32
18
  "--f-border-color-separator": "#ddddde",
33
19
  "--f-border-color-separator-pageheader-primary": "#fff",
34
- "--f-border-color-separator-contextmenu": "#8d8e91",
35
20
  "--f-border-color-link": "#4a52b6",
36
21
  "--f-border-color-link-hover": "#8d8e91",
37
22
  "--f-border-color-link-discrete": "#8d8e91",
38
23
  "--f-border-color-link-discrete-hover": "#4a52b6",
39
- "--f-border-color-menu-horizontal": "#116a3e",
40
- "--f-border-color-menu-horizontal-hover": "#afcfb5",
41
- "--f-border-color-menu-horizontal-highlight": "#116a3e",
42
- "--f-border-color-popupmenu": "#ddddde",
43
24
  "--f-box-modal-shadow": "0 0 20px rgba(0,0,0,.3)",
44
25
  "--f-input-shadow-inset": "inset 0 2px 3px rgba(0,0,0,.1)",
45
26
  "--f-font-family": "\"ExpFont\", \"NeueHass\", \"Helvetica Neue\", \"Helvetica\", \"Roboto\", \"Arial\", sans-serif",
@@ -82,7 +63,6 @@ const value = {
82
63
  "--f-animation-expand-open": "all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96) 0s",
83
64
  "--f-animation-expand-close": "all 500ms cubic-bezier(0.46, 0.03, 0.52, 0.96) 0s",
84
65
  "--f-density-factor": "1",
85
- "--f-static-panel-heading-border": "none",
86
66
  "--f-label-message-margin-top": "0.25rem",
87
67
  "--f-button-shadow": "0 1px 3px rgba(0,0,0,.3)",
88
68
  "--f-button-shadow-hover": "0 1px 3px rgba(0,0,0,.3)",
@@ -207,6 +187,10 @@ const value = {
207
187
  "--fkds-color-select-background-secondary-hover": "#dbe9e2",
208
188
  "--fkds-color-select-background-secondary-active": "#dbe9e2",
209
189
  "--fkds-color-select-background-secondary-focus": "#dbe9e2",
210
- "--fkui-theme-default-version": "\"6.28.0\""
190
+ "--fkds-color-navigation-border-hover": "#88b49f",
191
+ "--fkds-color-navigation-border-selected": "#35805b",
192
+ "--fkds-color-navigation-background-hover": "#dbe9e2",
193
+ "--fkds-color-navigation-background-selected": "#35805b",
194
+ "--fkui-theme-default-version": "\"6.30.0\""
211
195
  };
212
196
  module.exports = value;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fkui/theme-default",
3
- "version": "6.28.0",
3
+ "version": "6.30.0",
4
4
  "description": "FK Themes",
5
5
  "keywords": [
6
6
  "fkui",
@@ -32,12 +32,12 @@
32
32
  "prepack": "npm run build"
33
33
  },
34
34
  "devDependencies": {
35
- "@fkui/theme-builder": "6.28.0"
35
+ "@fkui/theme-builder": "6.30.0"
36
36
  },
37
37
  "engines": {
38
38
  "node": ">= 20",
39
39
  "npm": ">= 7"
40
40
  },
41
41
  "sass": "./src/_default.scss",
42
- "gitHead": "fe2ffaeb55b9e9f560cc6f660740bc3480f77cd8"
42
+ "gitHead": "2fc11f663fa0023ec1d0670feac5e64467fac8c2"
43
43
  }
package/src/_version.scss CHANGED
@@ -1,2 +1,2 @@
1
1
  // This is a generated file. See @fkui/theme-builder
2
- $version: "6.28.0";
2
+ $version: "6.30.0";
package/src/dark/_variables.scss CHANGED
@@ -82,4 +82,12 @@
82
82
  --fkds-color-select-background-secondary-hover: #{$palette-color-green-a-85};
83
83
  --fkds-color-select-background-secondary-active: #{$palette-color-green-a-85};
84
84
  --fkds-color-select-background-secondary-focus: #{$palette-color-green-a-85};
85
+
86
+ // NAVIGATION - BORDER
87
+ --fkds-color-navigation-border-hover: #{$palette-color-green-a-15};
88
+ --fkds-color-navigation-border-selected: #{$palette-color-green-a-85};
89
+
90
+ // NAVIGATION - BACKGROUND
91
+ --fkds-color-navigation-background-hover: #{$palette-color-green-a-50};
92
+ --fkds-color-navigation-background-selected: #{$palette-color-green-a-85};
85
93
  }
package/src/deprecated-variables.json CHANGED
@@ -261,5 +261,25 @@
261
261
  "--f-background-grid-active",
262
262
  "--f-background-tab-active",
263
263
  "--f-background-tab-inactive",
264
- "--f-background-button-discrete-hover"
264
+ "--f-background-button-discrete-hover",
265
+ "--f-background-menu",
266
+ "--f-background-menu-vertical-hover",
267
+ "--f-background-menu-vertical-highlight",
268
+ "--f-text-color-menu",
269
+ "--f-text-color-menu-hover",
270
+ "--f-text-color-menu-horizontal-highlight",
271
+ "--f-border-color-menu-horizontal",
272
+ "--f-border-color-menu-horizontal-hover",
273
+ "--f-border-color-menu-horizontal-highlight",
274
+ "--f-background-popupmenu",
275
+ "--f-background-popupmenu-vertical-hover",
276
+ "--f-background-popupmenu-vertical-highlight",
277
+ "--f-border-color-popupmenu",
278
+ "--f-text-color-popupmenu",
279
+ "--f-text-color-popupmenu-hover",
280
+ "--f-border-color-separator-contextmenu",
281
+ "--f-background-heading-static-panel",
282
+ "--f-border-color-panel",
283
+ "--f-border-color-static-panel",
284
+ "--f-static-panel-heading-border"
265
285
  ]
package/src/fkui-css-variables-deprecated.scss CHANGED
@@ -392,6 +392,28 @@ $palette-color-hav-20: #dbe0ec !default;
392
392
  --f-expandable-panel-heading-border-open: none;
393
393
  --f-expandable-panel-heading-border-close: none;
394
394
  --f-expandable-panel-heading-border-radius: 4px 4px 0 0;
395
+
396
+ // Deprecated since v6.30.0
397
+ --f-background-menu: #{$palette-color-fk-black-5};
398
+ --f-background-menu-vertical-hover: #{$palette-color-fk-black-15};
399
+ --f-background-menu-vertical-highlight: #{$palette-color-green-b-15};
400
+ --f-text-color-menu: #{$palette-color-fk-black-100};
401
+ --f-text-color-menu-hover: #{$palette-color-fk-black-100};
402
+ --f-text-color-menu-horizontal-highlight: #{$palette-color-fk-black-100};
403
+ --f-border-color-menu-horizontal: #{$palette-color-green-a-100};
404
+ --f-border-color-menu-horizontal-hover: #{$palette-color-green-b-50};
405
+ --f-border-color-menu-horizontal-highlight: #{$palette-color-green-a-100};
406
+ --f-background-popupmenu: #{$palette-color-white-100};
407
+ --f-background-popupmenu-vertical-hover: #{$palette-color-fk-black-15};
408
+ --f-background-popupmenu-vertical-highlight: #{$palette-color-green-b-15};
409
+ --f-border-color-popupmenu: #{$palette-color-fk-black-15};
410
+ --f-text-color-popupmenu: #{$palette-color-fk-black-100};
411
+ --f-text-color-popupmenu-hover: #{$palette-color-fk-black-100};
412
+ --f-border-color-separator-contextmenu: #{$palette-color-fk-black-50};
413
+ --f-background-heading-static-panel: #{$palette-color-green-b-50};
414
+ --f-border-color-panel: #{$palette-color-green-b-15};
415
+ --f-border-color-static-panel: #{$palette-color-green-b-50};
416
+ --f-static-panel-heading-border: none;
395
417
  }
396
418
 
397
419
  @if $global {
package/src/light/_variables.scss CHANGED
@@ -82,4 +82,12 @@
82
82
  --fkds-color-select-background-secondary-hover: #{$palette-color-green-a-15};
83
83
  --fkds-color-select-background-secondary-active: #{$palette-color-green-a-15};
84
84
  --fkds-color-select-background-secondary-focus: #{$palette-color-green-a-15};
85
+
86
+ // NAVIGATION - BORDER
87
+ --fkds-color-navigation-border-hover: #{$palette-color-green-a-50};
88
+ --fkds-color-navigation-border-selected: #{$palette-color-green-a-85};
89
+
90
+ // NAVIGATION - BACKGROUND
91
+ --fkds-color-navigation-background-hover: #{$palette-color-green-a-15};
92
+ --fkds-color-navigation-background-selected: #{$palette-color-green-a-85};
85
93
  }
package/src/shared/_index.scss CHANGED
@@ -19,60 +19,31 @@
19
19
  --f-text-color-heading-5: inherit;
20
20
  --f-text-color-heading-6: inherit;
21
21
 
22
- --f-text-color-menu: #{$palette-color-fk-black-100};
23
- --f-text-color-menu-hover: #{$palette-color-fk-black-100};
24
- --f-text-color-menu-horizontal-highlight: #{$palette-color-fk-black-100};
25
-
26
- --f-text-color-popupmenu: #{$palette-color-fk-black-100};
27
- --f-text-color-popupmenu-hover: #{$palette-color-fk-black-100};
28
-
29
22
  // ***********
30
23
  // ICON COLORS
31
24
  // ***********
32
25
  --f-icon-color-success: #{$palette-color-green-a-85}; // message-box, text-field, form-step
33
-
34
26
  --f-icon-color-success-background: #{$palette-color-green-a-15};
35
27
 
36
28
  // *****************
37
29
  // BACKGROUND COLORS
38
30
  // *****************
39
31
  --f-background-overlay: rgba(0, 0, 0, 0.75); // modal, loader
40
-
41
32
  --f-background-pageheader-primary: #{$palette-color-green-a-100}; // page-header
42
33
  --f-background-skiplink-focus: #{$palette-color-bluebell-5};
43
- --f-background-heading-static-panel: #{$palette-color-green-b-50};
44
-
45
34
  --f-background-sidepanel-button-tertiary-hover: #{$palette-color-bluebell-15}; // FLeftPanel and FRightPanel
46
35
 
47
- --f-background-menu: #{$palette-color-fk-black-5};
48
- --f-background-menu-vertical-hover: #{$palette-color-fk-black-15};
49
- --f-background-menu-vertical-highlight: #{$palette-color-green-b-15};
50
-
51
- --f-background-popupmenu: #{$palette-color-white-100};
52
- --f-background-popupmenu-vertical-hover: #{$palette-color-fk-black-15};
53
- --f-background-popupmenu-vertical-highlight: #{$palette-color-green-b-15};
54
-
55
36
  // *************
56
37
  // BORDER COLORS
57
38
  // *************
58
39
 
59
- --f-border-color-panel: #{$palette-color-green-b-15}; // expandable-panel, static-panel palettfärg!?
60
- --f-border-color-static-panel: #{$palette-color-green-b-50};
61
-
62
40
  --f-border-color-separator: #{$palette-color-fk-black-15}; // radio-button-group, file-item, expandable-paragraph
63
41
  --f-border-color-separator-pageheader-primary: #{$palette-color-white-100}; // page-header
64
- --f-border-color-separator-contextmenu: #{$palette-color-fk-black-50};
65
42
  --f-border-color-link: #{$palette-color-bluebell-100};
66
43
  --f-border-color-link-hover: #{$palette-color-fk-black-50};
67
44
  --f-border-color-link-discrete: #{$palette-color-fk-black-50};
68
45
  --f-border-color-link-discrete-hover: #{$palette-color-bluebell-100};
69
46
 
70
- --f-border-color-menu-horizontal: #{$palette-color-green-a-100};
71
- --f-border-color-menu-horizontal-hover: #{$palette-color-green-b-50};
72
- --f-border-color-menu-horizontal-highlight: #{$palette-color-green-a-100};
73
-
74
- --f-border-color-popupmenu: #{$palette-color-fk-black-15};
75
-
76
47
  // *******************
77
48
  // COLOR VARIABLES END
78
49
  // *******************
@@ -159,7 +130,7 @@
159
130
  // ****************************
160
131
  // COMPONENT SPECIFIC VARIABLES
161
132
  // ****************************
162
- --f-static-panel-heading-border: none;
133
+
163
134
  --f-label-message-margin-top: 0.25rem;
164
135
 
165
136
  $_f-button-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);