@fkui/design 6.38.0 → 6.39.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/lib/fkui.css +141 -40
- package/lib/fkui.min.css +1 -1
- package/package.json +8 -8
- package/src/components/button/_button.scss +4 -0
- package/src/components/contextmenu/_contextmenu.scss +1 -0
- package/src/components/expandable-panel/_variables.scss +2 -2
- package/src/components/navigation-menu/_navigation-menu.scss +22 -0
- package/src/components/table-ng/_cell.scss +23 -2
- package/src/internal-components/popup-menu/_popup-menu.scss +15 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fkui/design",
|
|
3
|
-
"version": "6.
|
|
3
|
+
"version": "6.39.0",
|
|
4
4
|
"description": "fkui design",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"fkui",
|
|
@@ -39,19 +39,19 @@
|
|
|
39
39
|
"unit:watch": "node --test --watch"
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
|
-
"@fkui/icon-lib-default": "6.
|
|
43
|
-
"@fkui/theme-default": "6.
|
|
42
|
+
"@fkui/icon-lib-default": "6.39.0",
|
|
43
|
+
"@fkui/theme-default": "6.39.0",
|
|
44
44
|
"autoprefixer": "10.4.27",
|
|
45
|
-
"cssnano": "7.1.
|
|
45
|
+
"cssnano": "7.1.3",
|
|
46
46
|
"glob": "13.0.6",
|
|
47
47
|
"picocolors": "1.1.1",
|
|
48
|
-
"postcss": "8.5.
|
|
48
|
+
"postcss": "8.5.8",
|
|
49
49
|
"postcss-url": "10.1.3",
|
|
50
50
|
"postcss-var-func-fallback": "3.0.1",
|
|
51
|
-
"svgo": "4.0.
|
|
51
|
+
"svgo": "4.0.1"
|
|
52
52
|
},
|
|
53
53
|
"peerDependencies": {
|
|
54
|
-
"@fkui/theme-default": "^6.
|
|
54
|
+
"@fkui/theme-default": "^6.39.0",
|
|
55
55
|
"sass": "^1.40.0",
|
|
56
56
|
"stylelint": ">= 14"
|
|
57
57
|
},
|
|
@@ -68,5 +68,5 @@
|
|
|
68
68
|
"npm": ">= 7"
|
|
69
69
|
},
|
|
70
70
|
"sass": "./src/fkui.scss",
|
|
71
|
-
"gitHead": "
|
|
71
|
+
"gitHead": "dcb4ae0482dae1d80806b45900c8b80771de7372"
|
|
72
72
|
}
|
|
@@ -241,6 +241,7 @@ $button--tertiary: (
|
|
|
241
241
|
font-weight: var(--f-font-weight-bold);
|
|
242
242
|
outline-offset: size.$padding-025;
|
|
243
243
|
line-height: calc(1.25 * var(--f-font-size-standard));
|
|
244
|
+
align-items: flex-start;
|
|
244
245
|
|
|
245
246
|
@include core.make-button-variant(".button", $button--discrete...);
|
|
246
247
|
|
|
@@ -268,6 +269,9 @@ $button--tertiary: (
|
|
|
268
269
|
&:hover {
|
|
269
270
|
border-radius: var(--f-button-discrete-radius-hover);
|
|
270
271
|
}
|
|
272
|
+
& > .button__icon {
|
|
273
|
+
flex-shrink: 0;
|
|
274
|
+
}
|
|
271
275
|
}
|
|
272
276
|
|
|
273
277
|
&.button--discrete-inverted {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
// HEADING
|
|
2
|
-
$expandablepanel-heading-color-background-default: var(--fkds-color-background-
|
|
3
|
-
$expandablepanel-heading-color-background-hover: var(--fkds-color-
|
|
2
|
+
$expandablepanel-heading-color-background-default: var(--fkds-color-interactive-surface-background-primary-default) !default;
|
|
3
|
+
$expandablepanel-heading-color-background-hover: var(--fkds-color-interactive-surface-background-primary-hover) !default;
|
|
4
4
|
$expandablepanel-heading-color-text-default: var(--fkds-color-text-primary) !default;
|
|
5
5
|
$expandablepanel-heading-color-border: var(--fkds-color-border-primary) !default;
|
|
6
6
|
$expandablepanel-heading-notification-color-background: var(--fkds-color-feedback-background-negative-strong) !default;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
@use "../../core/size";
|
|
2
2
|
@use "../../core/mixins/breakpoints";
|
|
3
|
+
@use "../../core/mixins/forcedcolors";
|
|
3
4
|
@use "../../core/config-variables";
|
|
4
5
|
@use "variables" as *;
|
|
5
6
|
|
|
@@ -18,10 +19,18 @@
|
|
|
18
19
|
a:visited,
|
|
19
20
|
a:active {
|
|
20
21
|
color: $navigationmenu-menuitem-color-text-active;
|
|
22
|
+
|
|
23
|
+
@media (forced-colors: active) {
|
|
24
|
+
color: LinkText;
|
|
25
|
+
}
|
|
21
26
|
}
|
|
22
27
|
|
|
23
28
|
a:hover {
|
|
24
29
|
color: $navigationmenu-menuitem-color-text-hover;
|
|
30
|
+
|
|
31
|
+
@media (forced-colors: active) {
|
|
32
|
+
color: LinkText;
|
|
33
|
+
}
|
|
25
34
|
}
|
|
26
35
|
}
|
|
27
36
|
}
|
|
@@ -53,14 +62,20 @@
|
|
|
53
62
|
&:hover {
|
|
54
63
|
font-weight: var(--f-font-weight-normal);
|
|
55
64
|
background-color: $navigationmenu-vertical-color-background-hover;
|
|
65
|
+
@include forcedcolors.hover-indicator(outline, 2px);
|
|
56
66
|
}
|
|
57
67
|
|
|
58
68
|
&--highlight {
|
|
59
69
|
font-weight: var(--f-font-weight-medium);
|
|
60
70
|
background-color: $navigationmenu-vertical-color-background-selected;
|
|
71
|
+
@include forcedcolors.selected-indicator;
|
|
61
72
|
|
|
62
73
|
.imenu__list__anchor {
|
|
63
74
|
color: $navigationmenu-vertical-menuitem-color-text-selected;
|
|
75
|
+
|
|
76
|
+
@media (forced-colors: active) {
|
|
77
|
+
color: HighlightText;
|
|
78
|
+
}
|
|
64
79
|
}
|
|
65
80
|
}
|
|
66
81
|
|
|
@@ -68,6 +83,7 @@
|
|
|
68
83
|
background-color: $navigationmenu-vertical-color-background-selected;
|
|
69
84
|
font-weight: var(--f-font-weight-medium);
|
|
70
85
|
color: $navigationmenu-vertical-menuitem-color-text-selected;
|
|
86
|
+
@include forcedcolors.selected-indicator;
|
|
71
87
|
}
|
|
72
88
|
}
|
|
73
89
|
}
|
|
@@ -90,6 +106,7 @@
|
|
|
90
106
|
|
|
91
107
|
.imenu__list__anchor-container {
|
|
92
108
|
border-bottom: 5px solid $navigationmenu-horizontal-color-border-selected;
|
|
109
|
+
@include forcedcolors.hover-indicator(border-bottom, 5px);
|
|
93
110
|
}
|
|
94
111
|
|
|
95
112
|
.imenu__list__anchor:hover {
|
|
@@ -104,11 +121,16 @@
|
|
|
104
121
|
|
|
105
122
|
&__item:not(.imenu__list__item--highlight) .imenu__list__anchor-container:hover {
|
|
106
123
|
border-bottom: 5px solid $navigationmenu-horizontal-color-border-hover;
|
|
124
|
+
@include forcedcolors.hover-indicator(border-bottom, 5px);
|
|
107
125
|
}
|
|
108
126
|
|
|
109
127
|
&__anchor-container {
|
|
110
128
|
padding-bottom: size.$padding-050;
|
|
111
129
|
border-bottom: 5px solid transparent;
|
|
130
|
+
|
|
131
|
+
@media (forced-colors: active) {
|
|
132
|
+
border-bottom: none;
|
|
133
|
+
}
|
|
112
134
|
}
|
|
113
135
|
|
|
114
136
|
&__anchor {
|
|
@@ -15,6 +15,7 @@ $underline-thickness: 3px;
|
|
|
15
15
|
&:focus-within {
|
|
16
16
|
box-shadow: none;
|
|
17
17
|
outline: 3px solid $table-ng-cell-color-outline;
|
|
18
|
+
outline-offset: -3px;
|
|
18
19
|
}
|
|
19
20
|
|
|
20
21
|
&:not(&--menu-open):hover:has(button) {
|
|
@@ -77,6 +78,13 @@ $underline-thickness: 3px;
|
|
|
77
78
|
}
|
|
78
79
|
}
|
|
79
80
|
|
|
81
|
+
&--select {
|
|
82
|
+
.table-ng__editable {
|
|
83
|
+
border: 3px solid transparent;
|
|
84
|
+
box-sizing: border-box;
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
|
|
80
88
|
&--text {
|
|
81
89
|
&:focus-visible {
|
|
82
90
|
box-shadow: none !important;
|
|
@@ -196,6 +204,7 @@ $underline-thickness: 3px;
|
|
|
196
204
|
&:focus {
|
|
197
205
|
box-shadow: none;
|
|
198
206
|
outline: 3px solid $table-ng-cell-color-outline;
|
|
207
|
+
outline-offset: -3px;
|
|
199
208
|
}
|
|
200
209
|
}
|
|
201
210
|
|
|
@@ -229,6 +238,7 @@ $underline-thickness: 3px;
|
|
|
229
238
|
padding: $vertical-padding $horizontal-padding;
|
|
230
239
|
display: flex;
|
|
231
240
|
align-items: center;
|
|
241
|
+
margin-block: 2px;
|
|
232
242
|
|
|
233
243
|
&__text {
|
|
234
244
|
flex: 1 1 auto;
|
|
@@ -245,8 +255,7 @@ $underline-thickness: 3px;
|
|
|
245
255
|
@media (forced-colors: active) {
|
|
246
256
|
.table-ng__editable {
|
|
247
257
|
forced-color-adjust: none;
|
|
248
|
-
|
|
249
|
-
border-bottom-width: 0;
|
|
258
|
+
color: CanvasText;
|
|
250
259
|
}
|
|
251
260
|
|
|
252
261
|
.table-ng__cell--text:hover .table-ng__editable,
|
|
@@ -256,4 +265,16 @@ $underline-thickness: 3px;
|
|
|
256
265
|
box-shadow: inset 0 (-$underline-thickness) 0 0 Highlight;
|
|
257
266
|
border-radius: 0;
|
|
258
267
|
}
|
|
268
|
+
|
|
269
|
+
.table-ng [tabindex="0"]:focus,
|
|
270
|
+
.table-ng [tabindex="0"]:focus-visible {
|
|
271
|
+
outline: 3px solid CanvasText;
|
|
272
|
+
outline-offset: -3px;
|
|
273
|
+
background: transparent;
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
.table-ng__cell :is(button, a, input, select, [role="combobox"]):focus,
|
|
277
|
+
.table-ng__cell :is(button, a, input, select, [role="combobox"]):focus-visible {
|
|
278
|
+
outline: none;
|
|
279
|
+
}
|
|
259
280
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
@use "../../core/size";
|
|
2
2
|
@use "../../core/mixins/breakpoints";
|
|
3
|
+
@use "../../core/mixins/forcedcolors";
|
|
3
4
|
@use "../../core/config-variables";
|
|
4
5
|
@use "variables" as *;
|
|
5
6
|
|
|
@@ -20,10 +21,18 @@
|
|
|
20
21
|
a:visited,
|
|
21
22
|
a:active {
|
|
22
23
|
color: $popupmenu-color-text-active;
|
|
24
|
+
|
|
25
|
+
@media (forced-colors: active) {
|
|
26
|
+
color: LinkText;
|
|
27
|
+
}
|
|
23
28
|
}
|
|
24
29
|
|
|
25
30
|
a:hover {
|
|
26
31
|
color: $popupmenu-color-text-hover;
|
|
32
|
+
|
|
33
|
+
@media (forced-colors: active) {
|
|
34
|
+
color: LinkText;
|
|
35
|
+
}
|
|
27
36
|
}
|
|
28
37
|
}
|
|
29
38
|
}
|
|
@@ -39,14 +48,20 @@
|
|
|
39
48
|
|
|
40
49
|
&:hover:not(.ipopupmenu__list__item--highlight) {
|
|
41
50
|
background-color: $popupmenu-color-background-hover;
|
|
51
|
+
@include forcedcolors.hover-indicator(outline, 2px);
|
|
42
52
|
}
|
|
43
53
|
|
|
44
54
|
&--highlight {
|
|
45
55
|
background-color: $popupmenu-color-background-selected;
|
|
46
56
|
font-weight: var(--f-font-weight-medium);
|
|
57
|
+
@include forcedcolors.selected-indicator;
|
|
47
58
|
|
|
48
59
|
& a {
|
|
49
60
|
color: $popupmenu-color-text-selected;
|
|
61
|
+
|
|
62
|
+
@media (forced-colors: active) {
|
|
63
|
+
color: HighlightText;
|
|
64
|
+
}
|
|
50
65
|
}
|
|
51
66
|
}
|
|
52
67
|
}
|