@fkui/theme-default 6.0.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/LICENSE.md ADDED
@@ -0,0 +1,7 @@
1
+ Copyright 2021 Försäkringskassan
2
+
3
+ Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
4
+
5
+ The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
6
+
7
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,4 @@
1
+ # fkui/theme-default
2
+
3
+ Biblioteket innehåller ett standardtema i form av CSS-variabler.
4
+ Palettfärger tillhandahålls även via ett javascript-objekt.
@@ -0,0 +1,137 @@
1
+ [
2
+ "--f-shadow-large",
3
+ "--f-color-backdrop",
4
+ "--f-backdrop-modal",
5
+ "--f-color-black",
6
+ "--f-color-brand-a-medium",
7
+ "--f-color-brand-a-strong",
8
+ "--f-color-brand-b-medium",
9
+ "--f-color-brand-b-strong",
10
+ "--f-color-brand-c-light",
11
+ "--f-color-brand-c-medium",
12
+ "--f-color-error-light",
13
+ "--f-color-error-medium",
14
+ "--f-color-info-light",
15
+ "--f-color-info-medium",
16
+ "--f-color-info-midlight",
17
+ "--f-color-info-midstrong",
18
+ "--f-color-info-strong",
19
+ "--f-color-notice-light",
20
+ "--f-color-notice-medium",
21
+ "--f-color-notice-strong",
22
+ "--f-color-passive-light",
23
+ "--f-color-passive-medium",
24
+ "--f-color-passive-midlight",
25
+ "--f-color-passive-midstrong",
26
+ "--f-color-passive-strong",
27
+ "--f-color-primary-light",
28
+ "--f-color-primary-midlight",
29
+ "--f-color-primary-midstrong",
30
+ "--f-color-primary-strong",
31
+ "--f-color-secondary-light",
32
+ "--f-color-secondary-medium",
33
+ "--f-color-secondary-midlight",
34
+ "--f-color-secondary-strong",
35
+ "--f-color-standard-medium",
36
+ "--f-color-standard-strong",
37
+ "--f-color-success-light",
38
+ "--f-color-success-medium",
39
+ "--f-color-warning-light",
40
+ "--f-color-warning-medium",
41
+ "--f-color-warning-strong",
42
+ "--f-color-white",
43
+ "--f-font-color-passive",
44
+ "--f-font-color-primary",
45
+ "--f-font-color-secondary",
46
+ "--f-shadow-small",
47
+ "--f-shadow-medium",
48
+ "--f-shadow-inset",
49
+ "--f-font-color-primary",
50
+ "--f-font-color-secondary",
51
+ "--f-font-color-passive",
52
+ "--f-font-size-default",
53
+ "--f-font-size-default-large-up",
54
+ "--f-font-height-small",
55
+ "--f-font-height-medium",
56
+ "--f-font-height-strong",
57
+ "--f-font-size-xxxxx-large",
58
+ "--f-font-size-xxxx-large",
59
+ "--f-font-size-xx-large",
60
+ "--f-font-size-x-large",
61
+ "--f-font-size-medium",
62
+ "--f-size-small",
63
+ "--f-size-medium",
64
+ "--f-size-large",
65
+ "--f-space-xx-small",
66
+ "--f-space-x-small",
67
+ "--f-space-small",
68
+ "--f-space-medium",
69
+ "--f-space-large",
70
+ "--f-space-x-large",
71
+ "--f-space-xx-large",
72
+ "--f-space-xxx-large",
73
+ "--f-margin-top",
74
+ "--f-margin-bottom",
75
+ "--f-margin",
76
+ "--f-padding",
77
+ "--f-color-interactive-focus",
78
+ "--f-animation-wrapper",
79
+ "--f-animation-margin",
80
+ "--f-hover-filter",
81
+ "--f-background-button-primary-disabled",
82
+ "--f-margin-component",
83
+ "--f-button-default-padding",
84
+ "--f-button-primary-padding",
85
+ "--f-button-secondary-padding",
86
+ "--f-button-standard-padding",
87
+ "--f-button-tertiary-padding",
88
+ "--f-button-discrete-padding",
89
+ "--f-button-discrete-black-padding",
90
+ "--f-button-discrete-table-column-action-padding",
91
+ "--f-background-badge-default",
92
+ "--f-background-badge-default-inverted",
93
+ "--f-border-color-badge-default",
94
+ "--f-background-badge-warning",
95
+ "--f-background-badge-warning-inverted",
96
+ "--f-border-color-badge-warning",
97
+ "--f-background-badge-error",
98
+ "--f-background-badge-error-inverted",
99
+ "--f-border-color-badge-error",
100
+ "--f-background-badge-success",
101
+ "--f-background-badge-success-inverted",
102
+ "--f-border-color-badge-success",
103
+ "--f-background-badge-info",
104
+ "--f-background-badge-info-inverted",
105
+ "--f-border-color-badge-info",
106
+ "--f-text-color-chip",
107
+ "--f-text-color-chip-active",
108
+ "--f-text-color-chip-hover",
109
+ "--f-background-chip",
110
+ "--f-background-chip-active",
111
+ "--f-background-chip-hover",
112
+ "--f-border-color-chip-active",
113
+ "--f-border-color-chip-hover",
114
+ "--f-background-input-disabled",
115
+ "--f-background-input-hover",
116
+ "--f-border-color-input-disabled",
117
+ "--f-text-color-button-disabled",
118
+ "--f-text-color-button-primary",
119
+ "--f-text-color-button-tertiary-disabled",
120
+ "--f-text-color-button-tertiary-inverted-hover",
121
+ "--f-background-button-standard",
122
+ "--f-background-button-standard-hover",
123
+ "--f-background-button-primary-hover",
124
+ "--f-background-button-secondary",
125
+ "--f-background-button-secondary-hover",
126
+ "--f-background-button-disabled",
127
+ "--f-border-color-button-disabled",
128
+ "--f-border-color-button-standard",
129
+ "--f-background-button-primary",
130
+ "--f-border-color-button-secondary",
131
+ "--f-text-color-button-secondary",
132
+ "--f-text-color-button-tertiary",
133
+ "--f-text-color-button-tertiary-hover",
134
+ "--f-background-button-tertiary-hover",
135
+ "--f-text-color-button-tertiary-inverted",
136
+ "--f-text-color-button-tertiary-inverted-disabled"
137
+ ]
@@ -0,0 +1,135 @@
1
+ :root {
2
+ --f-backdrop-modal: rgba(0, 0, 0, 0.75);
3
+ --f-color-backdrop: rgba(0, 0, 0, 0.75);
4
+ --f-shadow-large: 0 0 20px rgba(0, 0, 0, 0.3);
5
+ --f-color-white: #ffffff;
6
+ --f-color-black: #1b1e23;
7
+ --f-color-brand-a-medium: #297951;
8
+ --f-color-brand-a-strong: #116a3e;
9
+ --f-color-brand-b-medium: #5f9e6c;
10
+ --f-color-brand-b-strong: #0f660f;
11
+ --f-color-brand-c-light: #d3e7d5;
12
+ --f-color-brand-c-medium: #a6d0ab;
13
+ --f-color-info-light: #ededfc;
14
+ --f-color-info-midlight: #e3e4fb;
15
+ --f-color-info-medium: #d9dcfa;
16
+ --f-color-info-midstrong: #4a52b6;
17
+ --f-color-info-strong: #3942c2;
18
+ --f-color-primary-light: #f5f6fa;
19
+ --f-color-primary-midlight: #e5e5f5;
20
+ --f-color-primary-midstrong: #4a52b6;
21
+ --f-color-primary-strong: #434aa4;
22
+ --f-color-secondary-light: #ffffff;
23
+ --f-color-secondary-midlight: #edeef8;
24
+ --f-color-secondary-medium: #edeef8;
25
+ --f-color-secondary-strong: #4a52b6;
26
+ --f-color-standard-medium: #ededfc;
27
+ --f-color-standard-strong: #d9dcfa;
28
+ --f-color-passive-light: #f2f2f2;
29
+ --f-color-passive-midlight: #e5e5e5;
30
+ --f-color-passive-medium: #d9d9d9;
31
+ --f-color-passive-midstrong: #999999;
32
+ --f-color-passive-strong: #8c8c8c;
33
+ --f-color-success-light: #f3faf3;
34
+ --f-color-success-medium: #179c17;
35
+ --f-color-warning-light: #fff8e7;
36
+ --f-color-warning-medium: #ffbe10;
37
+ --f-color-warning-strong: #a67b0a;
38
+ --f-color-error-light: #fdeaea;
39
+ --f-color-error-medium: #ca1515;
40
+ --f-color-notice-light: #fef3e7;
41
+ --f-color-notice-medium: #f38c10;
42
+ --f-color-notice-strong: #d34503;
43
+ --f-shadow-small: 0 1px 3px rgba(0, 0, 0, 0.3);
44
+ --f-shadow-medium: 0 0 20px rgba(0, 0, 0, 0.3);
45
+ --f-shadow-inset: inset 0 2px 3px rgba(0, 0, 0, 0.1);
46
+ --f-font-color-primary: #1b1e23;
47
+ --f-font-color-secondary: #434ee4;
48
+ --f-font-color-passive: #5f6165;
49
+ --f-font-size-default: 16px;
50
+ --f-font-size-default-large-up: 16px;
51
+ --f-font-height-small: 1.25;
52
+ --f-font-height-medium: 1.4;
53
+ --f-font-height-strong: 1.5;
54
+ --f-font-size-xxxxx-large: 2.5rem;
55
+ --f-font-size-xxxx-large: 1.75rem;
56
+ --f-font-size-xx-large: 1.375rem;
57
+ --f-font-size-x-large: 1.25rem;
58
+ --f-font-size-medium: 1rem;
59
+ --f-size-small: 0.75rem;
60
+ --f-size-medium: 1rem;
61
+ --f-size-large: 1.25rem;
62
+ --f-space-xx-small: 0.25rem;
63
+ --f-space-x-small: 0.5rem;
64
+ --f-space-small: 0.75rem;
65
+ --f-space-medium: 1rem;
66
+ --f-space-large: 1.25rem;
67
+ --f-space-x-large: 1.5rem;
68
+ --f-space-xx-large: 1.75rem;
69
+ --f-space-xxx-large: 2rem;
70
+ --f-margin-top: 0.25rem;
71
+ --f-margin-bottom: 1.5rem;
72
+ --f-margin: 0 0 1.5rem;
73
+ --f-padding: 0 2.25em 0 0.75em;
74
+ --f-color-interactive-focus: #1b1e23;
75
+ --f-animation-wrapper: 4em;
76
+ --f-animation-margin: 0 auto 3em auto;
77
+ --f-hover-filter: brightness(115%);
78
+ --f-background-button-primary-disabled: #f4f4f4;
79
+ --f-margin-component: 0 0 1.5rem;
80
+ --f-button-default-padding: 1rem 1.5rem;
81
+ --f-button-primary-padding: 1rem 1.5rem;
82
+ --f-button-secondary-padding: 1rem 1.5rem;
83
+ --f-button-standard-padding: 1rem 1.5rem;
84
+ --f-button-tertiary-padding: 0.75rem 0.5rem;
85
+ --f-button-discrete-padding: initial;
86
+ --f-button-discrete-black-padding: initial;
87
+ --f-button-discrete-table-column-action-padding: 0.571rem;
88
+ --f-tooltip-close-button-padding: initial;
89
+ --f-background-badge-default: #ddddde;
90
+ --f-background-badge-default-inverted: #f4f4f4;
91
+ --f-border-color-badge-default: #8d8e91;
92
+ --f-background-badge-warning: #ffbe10;
93
+ --f-background-badge-warning-inverted: #fffcf3;
94
+ --f-border-color-badge-warning: #ffbe10;
95
+ --f-background-badge-error: #ca1515;
96
+ --f-background-badge-error-inverted: #fcf3f3;
97
+ --f-border-color-badge-error: #ca1515;
98
+ --f-background-badge-success: #35805b;
99
+ --f-background-badge-success-inverted: #f3f8f5;
100
+ --f-border-color-badge-success: #35805b;
101
+ --f-background-badge-info: #4a52b6;
102
+ --f-background-badge-info-inverted: #f5f6fa;
103
+ --f-border-color-badge-info: #4a52b6;
104
+ --f-text-color-chip: #1b1e23;
105
+ --f-text-color-chip-active: #ffffff;
106
+ --f-text-color-chip-hover: #1b1e23;
107
+ --f-background-chip: #ffffff;
108
+ --f-background-chip-active: #35805b;
109
+ --f-background-chip-hover: #f3f8f5;
110
+ --f-border-color-chip-active: #35805b;
111
+ --f-border-color-chip-hover: #35805b;
112
+ --f-background-input-disabled: #f4f4f4;
113
+ --f-background-input-hover: #e5e5f5;
114
+ --f-border-color-input-disabled: #8d8e91;
115
+ --f-text-color-button-disabled: #8d8e91;
116
+ --f-text-color-button-primary: #ffffff;
117
+ --f-text-color-button-tertiary-disabled: #8d8e91;
118
+ --f-text-color-button-tertiary-inverted-hover: #f4f4f4;
119
+ --f-background-button-standard: #f5f6fa;
120
+ --f-background-button-standard-hover: #e5e5f5;
121
+ --f-background-button-primary-hover: #3b4292;
122
+ --f-background-button-secondary: #f5f6fa;
123
+ --f-background-button-secondary-hover: #e5e5f5;
124
+ --f-background-button-disabled: #f4f4f4;
125
+ --f-border-color-button-disabled: #8d8e91;
126
+ --f-border-color-button-standard: #4a52b6;
127
+ --f-background-button-primary: #4a52b6;
128
+ --f-border-color-button-secondary: #4a52b6;
129
+ --f-text-color-button-secondary: #4a52b6;
130
+ --f-text-color-button-tertiary: #4a52b6;
131
+ --f-text-color-button-tertiary-hover: #4a52b6;
132
+ --f-background-button-tertiary-hover: #e5e5f5;
133
+ --f-text-color-button-tertiary-inverted: #ffffff;
134
+ --f-text-color-button-tertiary-inverted-disabled: #8d8e91;
135
+ }
@@ -0,0 +1 @@
1
+ module.exports = {"--f-backdrop-modal":"rgba(0, 0, 0, 0.75)","--f-color-backdrop":"rgba(0, 0, 0, 0.75)","--f-shadow-large":"0 0 20px rgba(0, 0, 0, 0.3)","--f-color-white":"#ffffff","--f-color-black":"#1b1e23","--f-color-brand-a-medium":"#297951","--f-color-brand-a-strong":"#116a3e","--f-color-brand-b-medium":"#5f9e6c","--f-color-brand-b-strong":"#0f660f","--f-color-brand-c-light":"#d3e7d5","--f-color-brand-c-medium":"#a6d0ab","--f-color-info-light":"#ededfc","--f-color-info-midlight":"#e3e4fb","--f-color-info-medium":"#d9dcfa","--f-color-info-midstrong":"#4a52b6","--f-color-info-strong":"#3942c2","--f-color-primary-light":"#f5f6fa","--f-color-primary-midlight":"#e5e5f5","--f-color-primary-midstrong":"#4a52b6","--f-color-primary-strong":"#434aa4","--f-color-secondary-light":"#ffffff","--f-color-secondary-midlight":"#edeef8","--f-color-secondary-medium":"#edeef8","--f-color-secondary-strong":"#4a52b6","--f-color-standard-medium":"#ededfc","--f-color-standard-strong":"#d9dcfa","--f-color-passive-light":"#f2f2f2","--f-color-passive-midlight":"#e5e5e5","--f-color-passive-medium":"#d9d9d9","--f-color-passive-midstrong":"#999999","--f-color-passive-strong":"#8c8c8c","--f-color-success-light":"#f3faf3","--f-color-success-medium":"#179c17","--f-color-warning-light":"#fff8e7","--f-color-warning-medium":"#ffbe10","--f-color-warning-strong":"#a67b0a","--f-color-error-light":"#fdeaea","--f-color-error-medium":"#ca1515","--f-color-notice-light":"#fef3e7","--f-color-notice-medium":"#f38c10","--f-color-notice-strong":"#d34503","--f-shadow-small":"0 1px 3px rgba(0, 0, 0, 0.3)","--f-shadow-medium":"0 0 20px rgba(0, 0, 0, 0.3)","--f-shadow-inset":"inset 0 2px 3px rgba(0, 0, 0, 0.1)","--f-font-color-primary":"#1b1e23","--f-font-color-secondary":"#434ee4","--f-font-color-passive":"#5f6165","--f-font-size-default":"16px","--f-font-size-default-large-up":"16px","--f-font-height-small":"1.25","--f-font-height-medium":"1.4","--f-font-height-strong":"1.5","--f-font-size-xxxxx-large":"2.5rem","--f-font-size-xxxx-large":"1.75rem","--f-font-size-xx-large":"1.375rem","--f-font-size-x-large":"1.25rem","--f-font-size-medium":"1rem","--f-size-small":"0.75rem","--f-size-medium":"1rem","--f-size-large":"1.25rem","--f-space-xx-small":"0.25rem","--f-space-x-small":"0.5rem","--f-space-small":"0.75rem","--f-space-medium":"1rem","--f-space-large":"1.25rem","--f-space-x-large":"1.5rem","--f-space-xx-large":"1.75rem","--f-space-xxx-large":"2rem","--f-margin-top":"0.25rem","--f-margin-bottom":"1.5rem","--f-margin":"0 0 1.5rem","--f-padding":"0 2.25em 0 0.75em","--f-color-interactive-focus":"#1b1e23","--f-animation-wrapper":"4em","--f-animation-margin":"0 auto 3em auto","--f-hover-filter":"brightness(115%)","--f-background-button-primary-disabled":"#f4f4f4","--f-margin-component":"0 0 1.5rem","--f-button-default-padding":"1rem 1.5rem","--f-button-primary-padding":"1rem 1.5rem","--f-button-secondary-padding":"1rem 1.5rem","--f-button-standard-padding":"1rem 1.5rem","--f-button-tertiary-padding":"0.75rem 0.5rem","--f-button-discrete-padding":"initial","--f-button-discrete-black-padding":"initial","--f-button-discrete-table-column-action-padding":"0.571rem","--f-tooltip-close-button-padding":"initial","--f-background-badge-default":"#ddddde","--f-background-badge-default-inverted":"#f4f4f4","--f-border-color-badge-default":"#8d8e91","--f-background-badge-warning":"#ffbe10","--f-background-badge-warning-inverted":"#fffcf3","--f-border-color-badge-warning":"#ffbe10","--f-background-badge-error":"#ca1515","--f-background-badge-error-inverted":"#fcf3f3","--f-border-color-badge-error":"#ca1515","--f-background-badge-success":"#35805b","--f-background-badge-success-inverted":"#f3f8f5","--f-border-color-badge-success":"#35805b","--f-background-badge-info":"#4a52b6","--f-background-badge-info-inverted":"#f5f6fa","--f-border-color-badge-info":"#4a52b6","--f-text-color-chip":"#1b1e23","--f-text-color-chip-active":"#ffffff","--f-text-color-chip-hover":"#1b1e23","--f-background-chip":"#ffffff","--f-background-chip-active":"#35805b","--f-background-chip-hover":"#f3f8f5","--f-border-color-chip-active":"#35805b","--f-border-color-chip-hover":"#35805b","--f-background-input-disabled":"#f4f4f4","--f-background-input-hover":"#e5e5f5","--f-border-color-input-disabled":"#8d8e91","--f-text-color-button-disabled":"#8d8e91","--f-text-color-button-primary":"#ffffff","--f-text-color-button-tertiary-disabled":"#8d8e91","--f-text-color-button-tertiary-inverted-hover":"#f4f4f4","--f-background-button-standard":"#f5f6fa","--f-background-button-standard-hover":"#e5e5f5","--f-background-button-primary-hover":"#3b4292","--f-background-button-secondary":"#f5f6fa","--f-background-button-secondary-hover":"#e5e5f5","--f-background-button-disabled":"#f4f4f4","--f-border-color-button-disabled":"#8d8e91","--f-border-color-button-standard":"#4a52b6","--f-background-button-primary":"#4a52b6","--f-border-color-button-secondary":"#4a52b6","--f-text-color-button-secondary":"#4a52b6","--f-text-color-button-tertiary":"#4a52b6","--f-text-color-button-tertiary-hover":"#4a52b6","--f-background-button-tertiary-hover":"#e5e5f5","--f-text-color-button-tertiary-inverted":"#ffffff","--f-text-color-button-tertiary-inverted-disabled":"#8d8e91"}
@@ -0,0 +1,359 @@
1
+ :root {
2
+ --fkui-theme-default-version: "6.0.0";
3
+ --fkds-color-text-primary: #1b1e23;
4
+ --fkds-color-text-secondary: #5f6165;
5
+ --fkds-color-text-inverted: #ffffff;
6
+ --fkds-color-text-disabled: #8d8e91;
7
+ --fkds-color-background-primary: #ffffff;
8
+ --fkds-color-background-secondary: #f4f4f4;
9
+ --fkds-color-background-tertiary: #ddddde;
10
+ --fkds-color-background-disabled: #f4f4f4;
11
+ --fkds-color-action-background-select-hover: #dbe9e2;
12
+ --fkds-color-action-background-select-default: #35805b;
13
+ --fkds-color-border-primary: #8d8e91;
14
+ --fkds-color-border-strong: #5f6165;
15
+ --fkds-color-border-weak: #ddddde;
16
+ --fkds-color-action-text-primary-default: #4a52b6;
17
+ --fkds-color-action-text-primary-hover: #3b4292;
18
+ --fkds-color-action-text-primary-active: #3b4292;
19
+ --fkds-color-action-text-primary-focus: #3b4292;
20
+ --fkds-color-action-text-secondary-default: #1b1e23;
21
+ --fkds-color-action-text-secondary-hover: #3b4292;
22
+ --fkds-color-action-text-secondary-active: #3b4292;
23
+ --fkds-color-action-text-secondary-focus: #3b4292;
24
+ --fkds-color-action-text-inverted-default: #ffffff;
25
+ --fkds-color-action-text-inverted-hover: #ffffff;
26
+ --fkds-color-action-text-inverted-active: #ffffff;
27
+ --fkds-color-action-text-inverted-focus: #ffffff;
28
+ --fkds-color-action-text-disabled: #8d8e91;
29
+ --fkds-color-action-background-primary-default: #4a52b6;
30
+ --fkds-color-action-background-primary-hover: #3b4292;
31
+ --fkds-color-action-background-primary-active: #3b4292;
32
+ --fkds-color-action-background-primary-focus: #3b4292;
33
+ --fkds-color-action-background-secondary-default: #f5f6fa;
34
+ --fkds-color-action-background-secondary-hover: #e5e5f5;
35
+ --fkds-color-action-background-secondary-active: #e5e5f5;
36
+ --fkds-color-action-background-secondary-focus: #e5e5f5;
37
+ --fkds-color-action-background-accent-default: #116a3e;
38
+ --fkds-color-action-background-accent-hover: #0e5532;
39
+ --fkds-color-action-background-accent-active: #0e5532;
40
+ --fkds-color-action-background-accent-focus: #0e5532;
41
+ --fkds-color-action-background-disabled: #f4f4f4;
42
+ --fkds-color-action-border-primary-default: #4a52b6;
43
+ --fkds-color-action-border-primary-hover: #3b4292;
44
+ --fkds-color-action-border-primary-active: #3b4292;
45
+ --fkds-color-action-border-primary-focus: #3b4292;
46
+ --fkds-color-action-border-accent-default: #116a3e;
47
+ --fkds-color-action-border-accent-hover: #0e5532;
48
+ --fkds-color-action-border-accent-active: #0e5532;
49
+ --fkds-color-action-border-accent-focus: #0e5532;
50
+ --fkds-color-action-border-disabled: #8d8e91;
51
+ --fkds-color-feedback-background-neutral: #f4f4f4;
52
+ --fkds-color-feedback-background-neutral-strong: #ddddde;
53
+ --fkds-color-feedback-background-info: #f5f6fa;
54
+ --fkds-color-feedback-background-info-strong: #4a52b6;
55
+ --fkds-color-feedback-background-positive: #f3f8f5;
56
+ --fkds-color-feedback-background-positive-strong: #35805b;
57
+ --fkds-color-feedback-background-warning: #fffcf3;
58
+ --fkds-color-feedback-background-warning-strong: #ffbe10;
59
+ --fkds-color-feedback-background-negative: #fcf3f3;
60
+ --fkds-color-feedback-background-negative-strong: #ca1515;
61
+ --fkds-color-feedback-border-neutral: #8d8e91;
62
+ --fkds-color-feedback-border-info: #4a52b6;
63
+ --fkds-color-feedback-border-positive: #35805b;
64
+ --fkds-color-feedback-border-warning: #ffbe10;
65
+ --fkds-color-feedback-border-negative: #ca1515;
66
+ --fkds-color-select-background-primary-default: #35805b;
67
+ --fkds-color-select-background-primary-hover: #dbe9e2;
68
+ --fkds-color-select-background-primary-active: #dbe9e2;
69
+ --fkds-color-select-background-primary-focus: #dbe9e2;
70
+ --fkds-icon-color-content-primary: #1b1e23;
71
+ --fkds-icon-color-background-primary: #ffffff;
72
+ --fkds-icon-color-border-primary: #1b1e23;
73
+ --fkds-icon-color-content-disabled: #8d8e91;
74
+ --fkds-icon-color-action-content-primary-default: #4a52b6;
75
+ --fkds-icon-color-action-content-primary-disabled: #8d8e91;
76
+ --fkds-icon-color-action-content-primary-hover: #3b4292;
77
+ --fkds-icon-color-action-content-primary-active: #3b4292;
78
+ --fkds-icon-color-action-content-primary-focus: #3b4292;
79
+ --fkds-icon-color-action-content-secondary-default: #1b1e23;
80
+ --fkds-icon-color-action-content-secondary-hover: #3b4292;
81
+ --fkds-icon-color-action-content-secondary-active: #3b4292;
82
+ --fkds-icon-color-action-content-secondary-focus: #3b4292;
83
+ --fkds-icon-color-action-content-accent-default: #116a3e;
84
+ --fkds-icon-color-action-content-accent-hover: #0e5532;
85
+ --fkds-icon-color-action-content-accent-active: #0e5532;
86
+ --fkds-icon-color-action-content-accent-focus: #0e5532;
87
+ --fkds-icon-color-action-content-weak-default: #5f6165;
88
+ --fkds-icon-color-action-content-inverted-default: #ffffff;
89
+ --fkds-icon-color-action-content-inverted-hover: #ffffff;
90
+ --fkds-icon-color-feedback-content-info: #1b1e23;
91
+ --fkds-icon-color-feedback-content-positive: #1b1e23;
92
+ --fkds-icon-color-feedback-content-warning: #1b1e23;
93
+ --fkds-icon-color-feedback-content-negative: #1b1e23;
94
+ --fkds-icon-color-feedback-background-info: #ffffff;
95
+ --fkds-icon-color-feedback-background-positive: #ffffff;
96
+ --fkds-icon-color-feedback-background-warning: #ffffff;
97
+ --fkds-icon-color-feedback-background-negative: #ffffff;
98
+ --fkds-icon-color-feedback-border-info: #1b1e23;
99
+ --fkds-icon-color-feedback-border-positive: #35805b;
100
+ --fkds-icon-color-feedback-border-warning: #ffbe10;
101
+ --fkds-icon-color-feedback-border-negative: #ca1515;
102
+ --f-text-color-default: #1b1e23;
103
+ --f-text-color-default-inverted: #ffffff;
104
+ --f-text-color-discrete: #5f6165;
105
+ --f-text-color-weekday-weeknumber: #5f6165;
106
+ --f-text-color-error: #d23838;
107
+ --f-text-color-link: #4a52b6;
108
+ --f-text-color-link-hover: #1b1e23;
109
+ --f-text-color-link-discrete: #1b1e23;
110
+ --f-text-color-link-discrete-hover: #4a52b6;
111
+ --f-text-color-heading-1: inherit;
112
+ --f-text-color-heading-2: inherit;
113
+ --f-text-color-heading-3: inherit;
114
+ --f-text-color-heading-4: inherit;
115
+ --f-text-color-heading-5: inherit;
116
+ --f-text-color-heading-6: inherit;
117
+ --f-text-color-input-disabled: #8d8e91;
118
+ --f-text-color-pageheader: #116a3e;
119
+ --f-text-color-navbar: #ffffff;
120
+ --f-text-color-navbar-active: #ffffff;
121
+ --f-text-color-heading-expandable-panel: #ffffff;
122
+ --f-text-color-wizard-step-done: #35805b;
123
+ --f-text-color-button-standard: #4a52b6;
124
+ --f-text-color-button-discrete: #4a52b6;
125
+ --f-text-color-button-discrete-disabled: #8d8e91;
126
+ --f-text-color-button-discrete-hover: #3b4292;
127
+ --f-text-color-button-discrete-inverted: #ffffff;
128
+ --f-text-color-button-discrete-inverted-hover: #ffffff;
129
+ --f-text-color-button-discrete-inverted-disabled: #e5e5f5;
130
+ --f-text-color-menu: #1b1e23;
131
+ --f-text-color-menu-hover: #1b1e23;
132
+ --f-text-color-menu-horizontal-highlight: #1b1e23;
133
+ --f-text-color-popupmenu: #1b1e23;
134
+ --f-text-color-popupmenu-hover: #1b1e23;
135
+ --f-text-color-close-button: #1b1e23;
136
+ --f-icon-color-white: #ffffff;
137
+ --f-icon-color-black: #1b1e23;
138
+ --f-icon-color-info: #4a52b6;
139
+ --f-icon-color-primary: #4a52b6;
140
+ --f-icon-color-discrete: #5f6165;
141
+ --f-icon-color-success: #35805b;
142
+ --f-icon-color-warning: #ffbe10;
143
+ --f-icon-color-error: #ca1515;
144
+ --f-icon-color-input: #8d8e91;
145
+ --f-icon-color-notice: #d34503;
146
+ --f-icon-color-loader: #35805b;
147
+ --f-icon-color-expandable-panel: #ffffff;
148
+ --f-icon-color-expandable-paragraph: #35805b;
149
+ --f-icon-color-table-header: #1b1e23;
150
+ --f-icon-color-table-header-discrete: #8d8e91;
151
+ --f-icon-color-sort-filter-dataset-close: #1b1e23;
152
+ --f-icon-color-sort-filter-dataset-search: #8d8e91;
153
+ --f-icon-color-wizard-step-pending: #f4f4f4;
154
+ --f-icon-color-wizard-step-done: #35805b;
155
+ --f-icon-color-success-background: #dbe9e2;
156
+ --f-background-content: #ffffff;
157
+ --f-background-form-step: #f4f4f4;
158
+ --f-background-input: #ffffff;
159
+ --f-background-input-selected: #4a52b6;
160
+ --f-background-input-selected-disabled: #8d8e91;
161
+ --f-background-error: #fcf3f3;
162
+ --f-background-info: #f5f6fa;
163
+ --f-background-warning: #fffcf3;
164
+ --f-background-success: #f3f8f5;
165
+ --f-background-overlay: rgba(0, 0, 0, 0.75);
166
+ --f-background-progress: #ddddde;
167
+ --f-background-progress-ongoing: #ffc834;
168
+ --f-background-progress-file-item-ongoing: #ffc834;
169
+ --f-background-progress-finished: #77ad82;
170
+ --f-background-pageheader-standard: #ffffff;
171
+ --f-background-pageheader-primary: #116a3e;
172
+ --f-background-pageheader-secondary: #e7f0e9;
173
+ --f-background-skiplink-focus: #f5f6fa;
174
+ --f-background-heading-expandable-panel: #116a3e;
175
+ --f-background-heading-expandable-panel-hover: #35805b;
176
+ --f-background-expandable-panel: #ffffff;
177
+ --f-background-heading-static-panel: #afcfb5;
178
+ --f-background-navbar: #116a3e;
179
+ --f-background-navbar-hover: #5f9e6c;
180
+ --f-background-code: #f4f4f4;
181
+ --f-background-wizard-step-line: #5f6165;
182
+ --f-background-button-discrete-hover: none;
183
+ --f-background-sidepanel-button-tertiary-hover: #e5e5f5;
184
+ --f-background-grid-default: #ffffff;
185
+ --f-background-grid-selected: #f5f6fa;
186
+ --f-background-grid-active: #e5e5f5;
187
+ --f-background-grid-hover: #f5f6fa;
188
+ --f-background-grid-striped: #f4f4f4;
189
+ --f-background-grid-header: #f4f4f4;
190
+ --f-background-grid-focus-inner: #f5f6fa;
191
+ --f-background-tab-active: #ffffff;
192
+ --f-background-tab-inactive: #f5f6fa;
193
+ --f-background-calendar-default: #f4f4f4;
194
+ --f-background-calendar-selected: #116a3e;
195
+ --f-background-calendar-hover: #e5e5f5;
196
+ --f-background-menu: #f4f4f4;
197
+ --f-background-menu-vertical-hover: #ddddde;
198
+ --f-background-menu-vertical-highlight: #e7f0e9;
199
+ --f-background-popupmenu: #ffffff;
200
+ --f-background-popupmenu-vertical-hover: #ddddde;
201
+ --f-background-popupmenu-vertical-highlight: #e7f0e9;
202
+ --f-background-month: #f4f4f4;
203
+ --f-background-dialogue-tree: #ffffff;
204
+ --f-background-dialogue-tree-hover: #e5e5f5;
205
+ --f-background-modal-shelf: #ffffff;
206
+ --f-border-color-modal: #8d8e91;
207
+ --f-border-color-info: #4a52b6;
208
+ --f-border-color-success: #35805b;
209
+ --f-border-color-warning: #ffbe10;
210
+ --f-border-color-error: #ca1515;
211
+ --f-border-color-input: #8d8e91;
212
+ --f-border-color-input-inner: #e5e5f5;
213
+ --f-border-color-input-inner-selected: #e5e5f5;
214
+ --f-border-color-input-inner-disabled: #ffffff;
215
+ --f-border-color-card: #8d8e91;
216
+ --f-border-color-dialogue-tree: #8d8e91;
217
+ --f-border-color-calendar-highlight: #5f6165;
218
+ --f-border-color-calendar-disabled: #8d8e91;
219
+ --f-border-color-calendar-navbar: #ddddde;
220
+ --f-border-color-calendar-selected: #ffffff;
221
+ --f-border-color-form-step: #ddddde;
222
+ --f-border-color-progress-finished: #4c7e56;
223
+ --f-border-color-progress-ongoing: #5f6165;
224
+ --f-border-color-progress-file-item-ongoing: #5f6165;
225
+ --f-border-color-panel: #e7f0e9;
226
+ --f-border-color-expandable-panel: #116a3e;
227
+ --f-border-color-static-panel: #afcfb5;
228
+ --f-border-color-separator: #ddddde;
229
+ --f-border-color-separator-pageheader-standard: #116a3e;
230
+ --f-border-color-separator-pageheader-primary: #ffffff;
231
+ --f-border-color-separator-pageheader-secondary: #116a3e;
232
+ --f-border-color-separator-contextmenu: #8d8e91;
233
+ --f-border-color-navbar-active: #ffffff;
234
+ --f-border-color-navbar-hover: #ffffff;
235
+ --f-border-color-wizard-step-line: #5f6165;
236
+ --f-border-color-link: #4a52b6;
237
+ --f-border-color-link-hover: #8d8e91;
238
+ --f-border-color-link-discrete: #8d8e91;
239
+ --f-border-color-link-discrete-hover: #4a52b6;
240
+ --f-border-color-grid: #8d8e91;
241
+ --f-border-color-grid-header: #8d8e91;
242
+ --f-border-color-grid-hover: #8d8e91;
243
+ --f-border-color-grid-expanded: #ddddde;
244
+ --f-border-color-expandable-panel-closed: none;
245
+ --f-border-color-menu-horizontal: #116a3e;
246
+ --f-border-color-menu-horizontal-hover: #afcfb5;
247
+ --f-border-color-menu-horizontal-highlight: #116a3e;
248
+ --f-border-color-popupmenu: #ddddde;
249
+ --f-box-modal-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
250
+ --f-input-shadow-inset: inset 0 2px 3px rgba(0, 0, 0, 0.1);
251
+ --f-font-family: "ExpFont", "NeueHass", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
252
+ --f-font-family-code: "Consolas", "Liberation Mono", "Courier", monospace;
253
+ --f-font-size-default-rem: 16px;
254
+ --f-font-size-default-large-up-rem: 16px;
255
+ --f-font-weight-normal: 400;
256
+ --f-font-weight-medium: 700;
257
+ --f-font-weight-bold: 900;
258
+ --f-line-height-small: 1.25;
259
+ --f-line-height-medium: 1.4;
260
+ --f-line-height-large: 1.5;
261
+ --f-font-size-h1: 2.5rem;
262
+ --f-font-size-h2: 1.75rem;
263
+ --f-font-size-xxx-large: 1.5rem;
264
+ --f-font-size-h3: 1.375rem;
265
+ --f-font-size-h4: 1.25rem;
266
+ --f-font-size-large: 1.125rem;
267
+ --f-font-size-standard: 1rem;
268
+ --f-icon-size-x-small: 0.75rem;
269
+ --f-icon-size-small: 1rem;
270
+ --f-icon-size-medium: 1.25rem;
271
+ --f-icon-size-large: 1.5rem;
272
+ --f-icon-size-x-large: 2rem;
273
+ --f-height-small: 0.75rem;
274
+ --f-height-medium: 1.25rem;
275
+ --f-height-large: 2.5rem;
276
+ --f-width-full: 100%;
277
+ --f-border-width-small: 1px;
278
+ --f-border-width-medium: 2px;
279
+ --f-border-radius-small: 2px;
280
+ --f-border-radius-medium: 4px;
281
+ --f-margin-component-bottom: 1.5rem;
282
+ --padding-input-fields: 0 2.25rem 0 0.75rem;
283
+ --f-color-focus: #1b1e23;
284
+ --f-focus-box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #1b1e23, 0 0 0 6px #ffffff;
285
+ --f-animation-duration-short: 150ms;
286
+ --f-animation-duration-medium: 350ms;
287
+ --f-animation-duration-long: 500ms;
288
+ --f-animation-expand-open: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96) 0s;
289
+ --f-animation-expand-close: all 500ms cubic-bezier(0.46, 0.03, 0.52, 0.96) 0s;
290
+ --f-density-factor: 1;
291
+ --f-static-panel-heading-border: none;
292
+ --f-expandable-panel-heading-border-close: none;
293
+ --f-expandable-panel-heading-border-open: none;
294
+ --f-expandable-panel-heading-border-radius: 4px 4px 0 0;
295
+ --f-label-message-margin-top: 0.25rem;
296
+ --f-button-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
297
+ --f-button-shadow-hover: 0 1px 3px rgba(0, 0, 0, 0.3);
298
+ --f-button-min-width: 9.5rem;
299
+ --f-button-letter-spacing: 0.01rem;
300
+ --f-button-default-line-height: 1.5rem;
301
+ --f-button-discrete-radius-hover: none;
302
+ --f-button-discrete-table-column-action-margin: 0;
303
+ --f-button-discrete-table-column-action-border-radius: 4px;
304
+ --f-button-discrete-table-column-action-icon-margin: 0 2px 0 2px;
305
+ --f-button-tertiary-table-column-action-margin: 0 0 0 0.5rem;
306
+ --f-button-default-padding-top: 1rem;
307
+ --f-button-default-padding-right: 1.5rem;
308
+ --f-button-default-padding-bottom: 1rem;
309
+ --f-button-default-padding-left: 1.5rem;
310
+ --f-button-primary-padding-top: 1rem;
311
+ --f-button-primary-padding-right: 1.5rem;
312
+ --f-button-primary-padding-bottom: 1rem;
313
+ --f-button-primary-padding-left: 1.5rem;
314
+ --f-button-secondary-padding-top: 1rem;
315
+ --f-button-secondary-padding-right: 1.5rem;
316
+ --f-button-secondary-padding-bottom: 1rem;
317
+ --f-button-secondary-padding-left: 1.5rem;
318
+ --f-button-standard-padding-top: 1rem;
319
+ --f-button-standard-padding-right: 1.5rem;
320
+ --f-button-standard-padding-bottom: 1rem;
321
+ --f-button-standard-padding-left: 1.5rem;
322
+ --f-button-tertiary-padding-top: 0.75rem;
323
+ --f-button-tertiary-padding-right: 0.5rem;
324
+ --f-button-tertiary-padding-bottom: 0.75rem;
325
+ --f-button-tertiary-padding-left: 0.5rem;
326
+ --f-button-discrete-padding-top: initial;
327
+ --f-button-discrete-padding-right: initial;
328
+ --f-button-discrete-padding-bottom: initial;
329
+ --f-button-discrete-padding-left: initial;
330
+ --f-button-discrete-black-padding-top: initial;
331
+ --f-button-discrete-black-padding-right: initial;
332
+ --f-button-discrete-black-padding-bottom: initial;
333
+ --f-button-discrete-black-padding-left: initial;
334
+ --f-button-discrete-table-column-action-padding-top: 0.571rem;
335
+ --f-button-discrete-table-column-action-padding-right: 0.571rem;
336
+ --f-button-discrete-table-column-action-padding-bottom: 0.571rem;
337
+ --f-button-discrete-table-column-action-padding-left: 0.571rem;
338
+ --f-modal-close-button-margin: 1rem 1rem 0;
339
+ --f-modal-close-button-padding: none;
340
+ --f-modal-size-small: 500px;
341
+ --f-modal-size-medium: 700px;
342
+ --f-modal-size-large: 1200px;
343
+ --f-modal-size-fullwidth: 100%;
344
+ --f-modal-title-font-size: 1.25rem;
345
+ --f-tooltip-close-button-margin: 0.375rem 0.375rem 0.625rem 0.625rem;
346
+ --f-tooltip-border-color: #8d8e91;
347
+ --f-tooltip-border-width: var(--f-border-width-medium);
348
+ --f-loader-size: 4rem;
349
+ --f-loader-margin: 0 auto 3rem auto;
350
+ --f-table-body-row-padding: 0.5rem;
351
+ --f-list-item-itempane-padding: 1.25rem;
352
+ --i-popup-error-offset: 24px;
353
+ --f-tooltip-offset: 0px;
354
+ --f-tooltip-icon-size: 0px;
355
+ --f-logo-image-small: none;
356
+ --f-logo-image-large: none;
357
+ --f-logo-size-small: 0.8rem;
358
+ --f-logo-size-large: 0.8rem 6.195rem;
359
+ }