@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.
Files changed (18) hide show
  1. package/LICENSE.md +7 -0
  2. package/README.md +4 -0
  3. package/dist/deprecated-variables.json +137 -0
  4. package/dist/fkui-css-variables-deprecated.css +135 -0
  5. package/dist/fkui-css-variables-deprecated.js +1 -0
  6. package/dist/fkui-css-variables.css +359 -0
  7. package/dist/fkui-css-variables.js +1 -0
  8. package/dist/palette.json +363 -0
  9. package/dist/palette.json.d.ts +15 -0
  10. package/package.json +48 -0
  11. package/src/_css-variables.scss +377 -0
  12. package/src/_int-css-variables.scss +169 -0
  13. package/src/_palette-variables.scss +75 -0
  14. package/src/_semantic-tokens.scss +128 -0
  15. package/src/_version.scss +2 -0
  16. package/src/deprecated-variables.json +137 -0
  17. package/src/fkui-css-variables-deprecated.scss +252 -0
  18. package/src/fkui-css-variables.scss +20 -0
package/src/_semantic-tokens.scss ADDED
@@ -0,0 +1,128 @@
1
+ @use "palette-variables" as *;
2
+
3
+ @mixin css-variables {
4
+ // TEXT
5
+ --fkds-color-text-primary: #{$palette-color-fk-black-100};
6
+ --fkds-color-text-secondary: #{$palette-color-fk-black-70};
7
+ --fkds-color-text-inverted: #{$palette-color-white-100};
8
+ --fkds-color-text-disabled: #{$palette-color-fk-black-50};
9
+
10
+ // BACKGROUND
11
+ --fkds-color-background-primary: #{$palette-color-white-100};
12
+ --fkds-color-background-secondary: #{$palette-color-fk-black-5};
13
+ --fkds-color-background-tertiary: #{$palette-color-fk-black-15};
14
+ --fkds-color-background-disabled: #{$palette-color-fk-black-5};
15
+
16
+ // BACKGROUND - ACTION
17
+ --fkds-color-action-background-select-hover: #{$palette-color-green-a-15};
18
+ --fkds-color-action-background-select-default: #{$palette-color-green-a-85};
19
+
20
+ // BORDER
21
+ --fkds-color-border-primary: #{$palette-color-fk-black-50};
22
+ --fkds-color-border-strong: #{$palette-color-fk-black-70};
23
+ --fkds-color-border-weak: #{$palette-color-fk-black-15};
24
+
25
+ // ACTION - TEXT
26
+ --fkds-color-action-text-primary-default: #{$palette-color-bluebell-100};
27
+ --fkds-color-action-text-primary-hover: #{$palette-color-bluebell-120};
28
+ --fkds-color-action-text-primary-active: #{$palette-color-bluebell-120};
29
+ --fkds-color-action-text-primary-focus: #{$palette-color-bluebell-120};
30
+ --fkds-color-action-text-secondary-default: #{$palette-color-fk-black-100};
31
+ --fkds-color-action-text-secondary-hover: #{$palette-color-bluebell-120};
32
+ --fkds-color-action-text-secondary-active: #{$palette-color-bluebell-120};
33
+ --fkds-color-action-text-secondary-focus: #{$palette-color-bluebell-120};
34
+ --fkds-color-action-text-inverted-default: #{$palette-color-white-100};
35
+ --fkds-color-action-text-inverted-hover: #{$palette-color-white-100};
36
+ --fkds-color-action-text-inverted-active: #{$palette-color-white-100};
37
+ --fkds-color-action-text-inverted-focus: #{$palette-color-white-100};
38
+ --fkds-color-action-text-disabled: #{$palette-color-fk-black-50};
39
+
40
+ // ACTION - BACKGROUND
41
+ --fkds-color-action-background-primary-default: #{$palette-color-bluebell-100};
42
+ --fkds-color-action-background-primary-hover: #{$palette-color-bluebell-120};
43
+ --fkds-color-action-background-primary-active: #{$palette-color-bluebell-120};
44
+ --fkds-color-action-background-primary-focus: #{$palette-color-bluebell-120};
45
+ --fkds-color-action-background-secondary-default: #{$palette-color-bluebell-5};
46
+ --fkds-color-action-background-secondary-hover: #{$palette-color-bluebell-15};
47
+ --fkds-color-action-background-secondary-active: #{$palette-color-bluebell-15};
48
+ --fkds-color-action-background-secondary-focus: #{$palette-color-bluebell-15};
49
+ --fkds-color-action-background-accent-default: #{$palette-color-green-a-100};
50
+ --fkds-color-action-background-accent-hover: #{$palette-color-green-a-120};
51
+ --fkds-color-action-background-accent-active: #{$palette-color-green-a-120};
52
+ --fkds-color-action-background-accent-focus: #{$palette-color-green-a-120};
53
+ --fkds-color-action-background-disabled: #{$palette-color-fk-black-5};
54
+
55
+ // ACTION - BORDER
56
+ --fkds-color-action-border-primary-default: #{$palette-color-bluebell-100};
57
+ --fkds-color-action-border-primary-hover: #{$palette-color-bluebell-120};
58
+ --fkds-color-action-border-primary-active: #{$palette-color-bluebell-120};
59
+ --fkds-color-action-border-primary-focus: #{$palette-color-bluebell-120};
60
+ --fkds-color-action-border-accent-default: #{$palette-color-green-a-100};
61
+ --fkds-color-action-border-accent-hover: #{$palette-color-green-a-120};
62
+ --fkds-color-action-border-accent-active: #{$palette-color-green-a-120};
63
+ --fkds-color-action-border-accent-focus: #{$palette-color-green-a-120};
64
+ --fkds-color-action-border-disabled: #{$palette-color-fk-black-50};
65
+
66
+ // FEEDBACK - BACKGROUND
67
+ --fkds-color-feedback-background-neutral: #{$palette-color-fk-black-5};
68
+ --fkds-color-feedback-background-neutral-strong: #{$palette-color-fk-black-15};
69
+ --fkds-color-feedback-background-info: #{$palette-color-bluebell-5};
70
+ --fkds-color-feedback-background-info-strong: #{$palette-color-bluebell-100};
71
+ --fkds-color-feedback-background-positive: #{$palette-color-green-a-5};
72
+ --fkds-color-feedback-background-positive-strong: #{$palette-color-green-a-85};
73
+ --fkds-color-feedback-background-warning: #{$palette-color-yellow-5};
74
+ --fkds-color-feedback-background-warning-strong: #{$palette-color-yellow-100};
75
+ --fkds-color-feedback-background-negative: #{$palette-color-red-5};
76
+ --fkds-color-feedback-background-negative-strong: #{$palette-color-red-100};
77
+
78
+ // FEEDBACK - BORDER
79
+ --fkds-color-feedback-border-neutral: #{$palette-color-fk-black-50};
80
+ --fkds-color-feedback-border-info: #{$palette-color-bluebell-100};
81
+ --fkds-color-feedback-border-positive: #{$palette-color-green-a-85};
82
+ --fkds-color-feedback-border-warning: #{$palette-color-yellow-100};
83
+ --fkds-color-feedback-border-negative: #{$palette-color-red-100};
84
+
85
+ // SELECT - BACKGROUND
86
+ --fkds-color-select-background-primary-default: #{$palette-color-green-a-85};
87
+ --fkds-color-select-background-primary-hover: #{$palette-color-green-a-15};
88
+ --fkds-color-select-background-primary-active: #{$palette-color-green-a-15};
89
+ --fkds-color-select-background-primary-focus: #{$palette-color-green-a-15};
90
+
91
+ // ICON
92
+ --fkds-icon-color-content-primary: #{$palette-color-fk-black-100};
93
+ --fkds-icon-color-background-primary: #{$palette-color-white-100};
94
+ --fkds-icon-color-border-primary: #{$palette-color-fk-black-100};
95
+ --fkds-icon-color-content-disabled: #{$palette-color-fk-black-50};
96
+
97
+ // ICON - ACTION
98
+ --fkds-icon-color-action-content-primary-default: #{$palette-color-bluebell-100};
99
+ --fkds-icon-color-action-content-primary-disabled: #{$palette-color-fk-black-50};
100
+ --fkds-icon-color-action-content-primary-hover: #{$palette-color-bluebell-120};
101
+ --fkds-icon-color-action-content-primary-active: #{$palette-color-bluebell-120};
102
+ --fkds-icon-color-action-content-primary-focus: #{$palette-color-bluebell-120};
103
+ --fkds-icon-color-action-content-secondary-default: #{$palette-color-fk-black-100};
104
+ --fkds-icon-color-action-content-secondary-hover: #{$palette-color-bluebell-120};
105
+ --fkds-icon-color-action-content-secondary-active: #{$palette-color-bluebell-120};
106
+ --fkds-icon-color-action-content-secondary-focus: #{$palette-color-bluebell-120};
107
+ --fkds-icon-color-action-content-accent-default: #{$palette-color-green-a-100};
108
+ --fkds-icon-color-action-content-accent-hover: #{$palette-color-green-a-120};
109
+ --fkds-icon-color-action-content-accent-active: #{$palette-color-green-a-120};
110
+ --fkds-icon-color-action-content-accent-focus: #{$palette-color-green-a-120};
111
+ --fkds-icon-color-action-content-weak-default: #{$palette-color-fk-black-70};
112
+ --fkds-icon-color-action-content-inverted-default: #{$palette-color-white-100};
113
+ --fkds-icon-color-action-content-inverted-hover: #{$palette-color-white-100};
114
+
115
+ // ICON - FEEDBACK
116
+ --fkds-icon-color-feedback-content-info: #{$palette-color-fk-black-100};
117
+ --fkds-icon-color-feedback-content-positive: #{$palette-color-fk-black-100};
118
+ --fkds-icon-color-feedback-content-warning: #{$palette-color-fk-black-100};
119
+ --fkds-icon-color-feedback-content-negative: #{$palette-color-fk-black-100};
120
+ --fkds-icon-color-feedback-background-info: #{$palette-color-white-100};
121
+ --fkds-icon-color-feedback-background-positive: #{$palette-color-white-100};
122
+ --fkds-icon-color-feedback-background-warning: #{$palette-color-white-100};
123
+ --fkds-icon-color-feedback-background-negative: #{$palette-color-white-100};
124
+ --fkds-icon-color-feedback-border-info: #{$palette-color-fk-black-100};
125
+ --fkds-icon-color-feedback-border-positive: #{$palette-color-green-a-85};
126
+ --fkds-icon-color-feedback-border-warning: #{$palette-color-yellow-100};
127
+ --fkds-icon-color-feedback-border-negative: #{$palette-color-red-100};
128
+ }
package/src/_version.scss ADDED
@@ -0,0 +1,2 @@
1
+ // This is a generated file. See generate-version.js
2
+ $version: "6.0.0";
package/src/deprecated-variables.json ADDED
@@ -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
+ ]
package/src/fkui-css-variables-deprecated.scss ADDED
@@ -0,0 +1,252 @@
1
+ // stylelint-disable custom-property-empty-line-before -- technical debt, should just add a comment before each block
2
+
3
+ @use "./palette-variables" as *;
4
+
5
+ $global: true !default;
6
+ $palette-color-red-10: #fdeaea !default;
7
+ $palette-color-black-5: #f2f2f2 !default;
8
+ $palette-color-black-10: #e5e5e5 !default;
9
+ $palette-color-black-15: #d9d9d9 !default;
10
+ $palette-color-black-40: #999999 !default;
11
+ $palette-color-black-45: #8c8c8c !default;
12
+ $palette-color-green-a-90: #297951 !default;
13
+ $palette-color-green-65-dark: #0f660f !default;
14
+ $palette-color-green-c-50: #d3e7d5 !default;
15
+ $palette-color-green-c-100: #a6d0ab !default;
16
+ $palette-color-blue-10: #ededfc !default;
17
+ $palette-color-black-40: #999999 !default;
18
+ $palette-color-black-45: #8c8c8c !default;
19
+ $palette-color-blue-10: #ededfc !default;
20
+ $palette-color-blue-15: #e3e4fb !default;
21
+ $palette-color-blue-20: #d9dcfa !default;
22
+ $palette-color-blue-85-dark: #3942c2 !default;
23
+ $palette-color-blue-85: #5f68e8 !default;
24
+ $palette-color-blue-100: #434ee4 !default;
25
+ $palette-color-bluebell-10: #edeef8 !default;
26
+ $palette-color-bluebell-90-dark: #434aa4 !default;
27
+ $palette-color-green-100: #179c17 !default;
28
+ $palette-color-green-80: #46b046 !default;
29
+ $palette-color-green-45: #97d397 !default;
30
+ $palette-color-green-10: #e8f5e8 !default;
31
+ $palette-color-green-5: #f3faf3 !default;
32
+ $palette-color-green-65-dark: #0f660f !default;
33
+ $palette-color-green-b-65-dark: #2f693d !default;
34
+ $palette-color-green-b-95-dark: #459959 !default;
35
+ $palette-color-green-c-100: #a6d0ab !default;
36
+ $palette-color-green-c-50: #d3e7d5 !default;
37
+ $palette-color-orange-10: #fef3e7 !default;
38
+ $palette-color-orange-100: #f38c10 !default;
39
+ $palette-color-yellow-10: #fff8e7 !default;
40
+ $palette-color-yellow-65-dark: #a67b0a !default;
41
+ $palette-color-tegel-80: #db6a35 !default;
42
+ $palette-color-tegel-60: #e48f68 !default;
43
+ $palette-color-tegel-40: #edb59a !default;
44
+ $palette-color-tegel-20: #ffffff !default;
45
+ $palette-color-plommon-100: #a73a64 !default;
46
+ $palette-color-plommon-80: #b96182 !default;
47
+ $palette-color-plommon-60: #ca88a1 !default;
48
+ $palette-color-plommon-40: #dcb0c1 !default;
49
+ $palette-color-plommon-20: #edd7e0 !default;
50
+ $palette-color-senap-80: #cba14d !default;
51
+ $palette-color-senap-60: #d8b879 !default;
52
+ $palette-color-senap-40: #e5d0a6 !default;
53
+ $palette-color-senap-20: #f2e7d2 !default;
54
+ $palette-color-hav-80: #6f85b2 !default;
55
+ $palette-color-hav-60: #93a3c5 !default;
56
+ $palette-color-hav-40: #b7c2d9 !default;
57
+ $palette-color-hav-20: #dbe0ec !default;
58
+
59
+ @mixin deprecated-variables {
60
+ // Backdrop color
61
+ // Example use: modal dialogues
62
+ --f-backdrop-modal: rgba(0, 0, 0, 0.75);
63
+ --f-color-backdrop: rgba(0, 0, 0, 0.75); // v1.3.0
64
+ --f-shadow-large: 0 0 20px rgba(0, 0, 0, 0.3); // v1.3.0
65
+
66
+ /// Base colors
67
+ --f-color-white: #{$palette-color-white-100}; // v1.5.1
68
+ --f-color-black: #{$palette-color-fk-black-100}; // v1.5.1
69
+
70
+ /// Brand colors
71
+ /// Brand A colors, from light to strong
72
+ /// Example use: collapse icon, expandable panel, navbar
73
+ --f-color-brand-a-medium: #{$palette-color-green-a-90}; // v1.5.1
74
+ --f-color-brand-a-strong: #{$palette-color-green-a-100}; // v1.5.1
75
+
76
+ /// Brand B colors, from light to strong
77
+ /// Example use: expandable paragraph
78
+ --f-color-brand-b-medium: #{$palette-color-green-b-100}; // v1.5.1
79
+ --f-color-brand-b-strong: #{$palette-color-green-65-dark}; // v1.5.1
80
+
81
+ /// Brand C colors, from light to strong
82
+ /// Example use: static panel
83
+ --f-color-brand-c-light: #{$palette-color-green-c-50}; // v1.5.1
84
+ --f-color-brand-c-medium: #{$palette-color-green-c-100}; // v1.5.1
85
+
86
+ /// Info colors, from light to strong, e.g. light blue to dark blue.
87
+ /// Example use: info message, tooltip, info modal
88
+ --f-color-info-light: #{$palette-color-blue-10}; // v1.5.1
89
+ --f-color-info-midlight: #{$palette-color-blue-15}; // v1.5.1
90
+ --f-color-info-medium: #{$palette-color-blue-20}; // v1.5.1
91
+ --f-color-info-midstrong: #{$palette-color-bluebell-100}; // v1.5.1
92
+ --f-color-info-strong: #{$palette-color-blue-85-dark}; // v1.5.1
93
+
94
+ /// Primary colors, from light to strong
95
+ /// Example use: primary button
96
+ --f-color-primary-light: #{$palette-color-bluebell-5}; // v1.5.1
97
+ --f-color-primary-midlight: #{$palette-color-bluebell-15}; // v1.5.1
98
+ --f-color-primary-midstrong: #{$palette-color-bluebell-100}; // v1.5.1
99
+ --f-color-primary-strong: #{$palette-color-bluebell-90-dark}; // v1.5.1
100
+
101
+ /// Secondary colors, from light to strong
102
+ /// Example user: secondary button
103
+ --f-color-secondary-light: #{$palette-color-white-100}; // v1.5.1
104
+ --f-color-secondary-midlight: #{$palette-color-bluebell-10}; // v1.5.1
105
+ --f-color-secondary-medium: #{$palette-color-bluebell-10}; // v1.5.1
106
+ --f-color-secondary-strong: #{$palette-color-bluebell-100}; // v1.5.1
107
+
108
+ /// Standard colors, from light to strong
109
+ /// Example user: standard button
110
+ --f-color-standard-medium: #{$palette-color-blue-10}; // v1.5.1
111
+ --f-color-standard-strong: #{$palette-color-blue-20}; // v1.5.1
112
+
113
+ /// Passive colors, from light to strong, e.g. light gray to dark gray.
114
+ /// Example use: disabled
115
+ --f-color-passive-light: #{$palette-color-black-5}; // v1.5.1
116
+ --f-color-passive-midlight: #{$palette-color-black-10}; // v1.5.1
117
+ --f-color-passive-medium: #{$palette-color-black-15}; // v1.5.1
118
+ --f-color-passive-midstrong: #{$palette-color-black-40}; // v1.5.1
119
+ --f-color-passive-strong: #{$palette-color-black-45}; // v1.5.1
120
+
121
+ /// Success colors, from light to strong, e.g. light green to dark green.
122
+ /// Example use: valid check icon, bakground valid formstep
123
+ --f-color-success-light: #{$palette-color-green-5}; // v1.5.1
124
+ --f-color-success-medium: #{$palette-color-green-100}; // v1.5.1
125
+
126
+ /// Warning colors, from light to strong, e.g. light yellow to dark yellow.
127
+ /// Example use: warning message box, warning modal
128
+ --f-color-warning-light: #{$palette-color-yellow-10}; // v1.5.1
129
+ --f-color-warning-medium: #{$palette-color-yellow-100}; // v1.5.1
130
+ --f-color-warning-strong: #{$palette-color-yellow-65-dark}; // v1.5.1
131
+
132
+ /// Error colors, from light to strong, e.g. light red to dark red.
133
+ /// Example use: error message box, error modal
134
+ --f-color-error-light: #{$palette-color-red-10}; // v1.5.1
135
+ --f-color-error-medium: #{$palette-color-red-100}; // v1.5.1
136
+
137
+ // Notice colors, from light to strong, e.g. light orange to dark orange.
138
+ // Example use: notice messagebox (driftmeddelande)
139
+ --f-color-notice-light: #{$palette-color-orange-10}; // v1.5.1
140
+ --f-color-notice-medium: #{$palette-color-orange-100}; // v1.5.1
141
+ --f-color-notice-strong: #{$palette-color-tegel-100}; // v1.5.1
142
+
143
+ // Deprected since v3.3.0
144
+ --f-shadow-small: 0 1px 3px rgba(0, 0, 0, 0.3);
145
+ --f-shadow-medium: 0 0 20px rgba(0, 0, 0, 0.3);
146
+ --f-shadow-inset: inset 0 2px 3px rgba(0, 0, 0, 0.1);
147
+ --f-font-color-primary: #{$palette-color-fk-black-100};
148
+ --f-font-color-secondary: #{$palette-color-blue-100};
149
+ --f-font-color-passive: #{$palette-color-fk-black-70};
150
+ --f-font-size-default: 16px;
151
+ --f-font-size-default-large-up: 16px;
152
+ --f-font-height-small: 1.25;
153
+ --f-font-height-medium: 1.4;
154
+ --f-font-height-strong: 1.5;
155
+ --f-font-size-xxxxx-large: 2.5rem;
156
+ --f-font-size-xxxx-large: 1.75rem;
157
+ --f-font-size-xx-large: 1.375rem;
158
+ --f-font-size-x-large: 1.25rem;
159
+ --f-font-size-medium: 1rem;
160
+ --f-size-small: 0.75rem;
161
+ --f-size-medium: 1rem;
162
+ --f-size-large: 1.25rem;
163
+ --f-space-xx-small: 0.25rem;
164
+ --f-space-x-small: 0.5rem;
165
+ --f-space-small: 0.75rem;
166
+ --f-space-medium: 1rem;
167
+ --f-space-large: 1.25rem;
168
+ --f-space-x-large: 1.5rem;
169
+ --f-space-xx-large: 1.75rem;
170
+ --f-space-xxx-large: 2rem;
171
+ --f-margin-top: 0.25rem;
172
+ --f-margin-bottom: 1.5rem;
173
+ --f-margin: 0 0 1.5rem;
174
+ --f-padding: 0 2.25em 0 0.75em;
175
+ --f-color-interactive-focus: #{$palette-color-fk-black-100};
176
+ --f-animation-wrapper: 4em;
177
+ --f-animation-margin: 0 auto 3em auto;
178
+ --f-hover-filter: brightness(115%);
179
+
180
+ /// Deprecated since 4.36.0
181
+ --f-background-button-primary-disabled: #{$palette-color-fk-black-5};
182
+
183
+ /// Deprecated since 5.23.0
184
+ --f-margin-component: 0 0 1.5rem;
185
+ --f-button-default-padding: 1rem 1.5rem;
186
+ --f-button-primary-padding: 1rem 1.5rem;
187
+ --f-button-secondary-padding: 1rem 1.5rem;
188
+ --f-button-standard-padding: 1rem 1.5rem;
189
+ --f-button-tertiary-padding: 0.75rem 0.5rem;
190
+ --f-button-discrete-padding: initial;
191
+ --f-button-discrete-black-padding: initial;
192
+ --f-button-discrete-table-column-action-padding: 0.571rem;
193
+
194
+ /// Deprecated since 5.32.0
195
+ --f-tooltip-close-button-padding: initial;
196
+
197
+ /// Deprecated since 5.46.0
198
+ --f-background-badge-default: #{$palette-color-fk-black-15};
199
+ --f-background-badge-default-inverted: #{$palette-color-fk-black-5};
200
+ --f-border-color-badge-default: #{$palette-color-fk-black-50};
201
+ --f-background-badge-warning: #{$palette-color-yellow-100};
202
+ --f-background-badge-warning-inverted: #{$palette-color-yellow-5};
203
+ --f-border-color-badge-warning: #{$palette-color-yellow-100};
204
+ --f-background-badge-error: #{$palette-color-red-100};
205
+ --f-background-badge-error-inverted: #{$palette-color-red-5};
206
+ --f-border-color-badge-error: #{$palette-color-red-100};
207
+ --f-background-badge-success: #{$palette-color-green-a-85};
208
+ --f-background-badge-success-inverted: #{$palette-color-green-a-5};
209
+ --f-border-color-badge-success: #{$palette-color-green-a-85};
210
+ --f-background-badge-info: #{$palette-color-bluebell-100};
211
+ --f-background-badge-info-inverted: #{$palette-color-bluebell-5};
212
+ --f-border-color-badge-info: #{$palette-color-bluebell-100};
213
+ --f-text-color-chip: #{$palette-color-fk-black-100};
214
+ --f-text-color-chip-active: #{$palette-color-white-100};
215
+ --f-text-color-chip-hover: #{$palette-color-fk-black-100};
216
+ --f-background-chip: #{$palette-color-white-100};
217
+ --f-background-chip-active: #{$palette-color-green-a-85};
218
+ --f-background-chip-hover: #{$palette-color-green-a-5};
219
+ --f-border-color-chip-active: #{$palette-color-green-a-85};
220
+ --f-border-color-chip-hover: #{$palette-color-green-a-85};
221
+ --f-background-input-disabled: #{$palette-color-fk-black-5};
222
+ --f-background-input-hover: #{$palette-color-bluebell-15};
223
+ --f-border-color-input-disabled: #{$palette-color-fk-black-50};
224
+
225
+ // Deprecated since 6.0.0
226
+ --f-text-color-button-disabled: #{$palette-color-fk-black-50};
227
+ --f-text-color-button-primary: #{$palette-color-white-100};
228
+ --f-text-color-button-tertiary-disabled: #{$palette-color-fk-black-50};
229
+ --f-text-color-button-tertiary-inverted-hover: #{$palette-color-fk-black-5};
230
+ --f-background-button-standard: #{$palette-color-bluebell-5};
231
+ --f-background-button-standard-hover: #{$palette-color-bluebell-15};
232
+ --f-background-button-primary-hover: #{$palette-color-bluebell-120};
233
+ --f-background-button-secondary: #{$palette-color-bluebell-5};
234
+ --f-background-button-secondary-hover: #{$palette-color-bluebell-15};
235
+ --f-background-button-disabled: #{$palette-color-fk-black-5};
236
+ --f-border-color-button-disabled: #{$palette-color-fk-black-50};
237
+ --f-border-color-button-standard: #{$palette-color-bluebell-100};
238
+ --f-background-button-primary: #{$palette-color-bluebell-100};
239
+ --f-border-color-button-secondary: #{$palette-color-bluebell-100};
240
+ --f-text-color-button-secondary: #{$palette-color-bluebell-100};
241
+ --f-text-color-button-tertiary: #{$palette-color-bluebell-100};
242
+ --f-text-color-button-tertiary-hover: #{$palette-color-bluebell-100};
243
+ --f-background-button-tertiary-hover: #{$palette-color-bluebell-15};
244
+ --f-text-color-button-tertiary-inverted: #{$palette-color-white-100};
245
+ --f-text-color-button-tertiary-inverted-disabled: #{$palette-color-fk-black-50};
246
+ }
247
+
248
+ @if $global {
249
+ :root {
250
+ @include deprecated-variables;
251
+ }
252
+ }
package/src/fkui-css-variables.scss ADDED
@@ -0,0 +1,20 @@
1
+ // stylelint-disable custom-property-empty-line-before -- technical debt, should just add a comment before each block
2
+
3
+ @use "version" as *;
4
+ @use "semantic-tokens" as semantic-tokens;
5
+ @use "css-variables" as css-variables;
6
+
7
+ $global: true !default;
8
+
9
+ @mixin css-variables {
10
+ @include semantic-tokens.css-variables;
11
+ @include css-variables.css-variables;
12
+ }
13
+
14
+ @if $global {
15
+ :root {
16
+ --fkui-theme-default-version: "#{$version}";
17
+
18
+ @include css-variables;
19
+ }
20
+ }