@fkui/design 6.48.0 → 6.49.1

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 (17) hide show
  1. package/lib/fkui.css +60 -47
  2. package/lib/fkui.min.css +1 -1
  3. package/package.json +5 -5
  4. package/src/components/button/_button.scss +6 -4
  5. package/src/components/button/_variables.scss +3 -3
  6. package/src/components/expandable-panel/_expandable-panel.scss +1 -2
  7. package/src/components/expandable-paragraph/_expandable-paragraph.scss +2 -0
  8. package/src/components/icon/_icon-stack.scss +3 -3
  9. package/src/components/icon/_variables.scss +5 -0
  10. package/src/components/layout-navigation/_layout-navigation.scss +8 -16
  11. package/src/components/layout-navigation/_variables.scss +6 -1
  12. package/src/components/layout-secondary/_layout-secondary.scss +8 -16
  13. package/src/components/layout-secondary/_variables.scss +6 -1
  14. package/src/components/table-ng/_cell.scss +28 -1
  15. package/src/core/mixins/_focus.scss +3 -2
  16. package/src/internal-components/calendar-month/_calendar-month.scss +2 -1
  17. package/src/internal-components/calendar-navbar/_calendar-navbar.scss +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fkui/design",
3
- "version": "6.48.0",
3
+ "version": "6.49.1",
4
4
  "description": "fkui design",
5
5
  "keywords": [
6
6
  "fkui",
@@ -39,15 +39,15 @@
39
39
  "unit:watch": "node --test --watch"
40
40
  },
41
41
  "devDependencies": {
42
- "@fkui/icon-lib-default": "6.48.0",
43
- "@fkui/theme-default": "6.48.0",
42
+ "@fkui/icon-lib-default": "6.49.1",
43
+ "@fkui/theme-default": "6.49.1",
44
44
  "autoprefixer": "10.5.0",
45
45
  "cssnano": "8.0.1",
46
46
  "postcss": "8.5.15",
47
47
  "postcss-var-func-fallback": "3.0.1"
48
48
  },
49
49
  "peerDependencies": {
50
- "@fkui/theme-default": "^6.48.0",
50
+ "@fkui/theme-default": "^6.49.1",
51
51
  "sass": "^1.92.0",
52
52
  "stylelint": ">= 14"
53
53
  },
@@ -64,5 +64,5 @@
64
64
  "npm": ">= 7"
65
65
  },
66
66
  "sass": "./src/fkui.scss",
67
- "gitHead": "c56d2ac3b571ff60adca38be6f9fcea968485389"
67
+ "gitHead": "33a29c8c8f048389353574eaa04acd420ffbd994"
68
68
  }
package/src/components/button/_button.scss CHANGED
@@ -90,7 +90,7 @@ $button--tertiary: (
90
90
  /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder -- technical debt */
91
91
  @extend .button--discrete--black;
92
92
 
93
- color: $button-tertiary-black-color-text-default;
93
+ color: $button-tertiary-muted-color-text-default;
94
94
  }
95
95
  }
96
96
 
@@ -153,7 +153,7 @@ $button--tertiary: (
153
153
  padding-bottom: core.densify(var(--f-button-discrete-black-padding-bottom));
154
154
  padding-left: var(--f-button-discrete-black-padding-left);
155
155
  /* stylelint-enable declaration-block-no-redundant-longhand-properties */
156
- color: $button-tertiary-black-color-text-default;
156
+ color: $button-tertiary-muted-color-text-default;
157
157
  }
158
158
 
159
159
  &:hover {
@@ -209,13 +209,15 @@ $button--tertiary: (
209
209
  width: auto;
210
210
  }
211
211
 
212
+ &--muted,
213
+ // Deprecated since v6.49.0, replaced by `muted`.
212
214
  &--black {
213
- color: $button-tertiary-black-color-text-default;
215
+ color: $button-tertiary-muted-color-text-default;
214
216
 
215
217
  &:hover,
216
218
  &:active,
217
219
  &:focus {
218
- color: $button-tertiary-black-color-text-focus;
220
+ color: $button-tertiary-muted-color-text-focus;
219
221
  }
220
222
  }
221
223
 
package/src/components/button/_variables.scss CHANGED
@@ -18,9 +18,9 @@ $button-tertiary-color-text-disabled: var(--fkds-color-text-disabled) !default;
18
18
  $button-tertiary-color-background-hover: var(--fkds-color-action-background-secondary-hover) !default;
19
19
  $button-tertiary-color-text-hover: var(--fkds-color-action-text-primary-default) !default;
20
20
 
21
- // TERTIARY - black
22
- $button-tertiary-black-color-text-default: var(--fkds-color-action-text-secondary-default) !default;
23
- $button-tertiary-black-color-text-focus: var(--fkds-color-action-text-secondary-default) !default;
21
+ // TERTIARY - muted
22
+ $button-tertiary-muted-color-text-default: var(--fkds-color-action-text-secondary-default) !default;
23
+ $button-tertiary-muted-color-text-focus: var(--fkds-color-action-text-secondary-default) !default;
24
24
 
25
25
  // TERTIARY - inverted
26
26
  $button-tertiary-inverted-color-text-default: var(--fkds-color-action-text-inverted-default) !default;
package/src/components/expandable-panel/_expandable-panel.scss CHANGED
@@ -99,9 +99,8 @@
99
99
  }
100
100
 
101
101
  &__content {
102
- height: 0;
103
102
  overflow: hidden;
104
- transition: height var(--f-animation-duration-medium) ease-in;
103
+ transition: height 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96);
105
104
  }
106
105
 
107
106
  &__body {
package/src/components/expandable-paragraph/_expandable-paragraph.scss CHANGED
@@ -84,6 +84,8 @@ $EXPANDABLE_PARAGRAPH_LINE_HEIGHT: var(--f-line-height-medium);
84
84
  &__content {
85
85
  margin-top: core.densify(size.$margin-075);
86
86
  margin-bottom: core.densify(size.$margin-100);
87
+ overflow: hidden;
88
+ transition: height 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96);
87
89
  }
88
90
 
89
91
  &__separator {
package/src/components/icon/_icon-stack.scss CHANGED
@@ -138,13 +138,13 @@
138
138
  border-radius: 100%;
139
139
  overflow: hidden;
140
140
  .f-icon-circle {
141
- color: var(--f-icon-color-success-background);
142
- fill: var(--f-icon-color-success-background);
141
+ color: $icon-stack-circle-color-background;
142
+ fill: $icon-stack-circle-color-background;
143
143
  width: 100%;
144
144
  height: 100%;
145
145
  }
146
146
  .icon:not(.f-icon-circle) {
147
- color: var(--f-icon-color-success);
147
+ color: $icon-stack-circle-color-content;
148
148
  position: absolute;
149
149
  }
150
150
  }
package/src/components/icon/_variables.scss CHANGED
@@ -22,3 +22,8 @@ $icon-success-color-content: var(--fkds-color-text-primary) !default;
22
22
  $icon-tooltip-color-background: var(--fkds-color-action-background-primary-default);
23
23
  $icon-tooltip-color-border: var(--fkds-color-action-border-primary-default);
24
24
  $icon-tooltip-color-content: var(--fkds-color-text-inverted);
25
+
26
+ // STACK CIRCLE
27
+ // Legacy colors used until icon-stack--circle is deprecated.
28
+ $icon-stack-circle-color-background: #dbe9e2 !default;
29
+ $icon-stack-circle-color-content: #35805b !default;
package/src/components/layout-navigation/_layout-navigation.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @use "../z-index";
2
+ @use "variables" as *;
2
3
 
3
4
  $ZINDEX: z-index.$MODAL_ZINDEX - 1 !default;
4
5
 
@@ -10,15 +11,6 @@ $layout-navigation-content-padding: 4px !default;
10
11
  $layout-navigation-dot-diameter: 4px !default;
11
12
  $layout-navigation-dot-spacing: 4px !default;
12
13
 
13
- // Colors
14
- $palette-color-fk-black-5: #f4f4f4 !default;
15
- $palette-color-fk-black-50: #8d8e91 !default;
16
- $palette-color-bluebell-15: #e5e5f5 !default;
17
- $background-navigation: #{$palette-color-fk-black-5};
18
- $border-hover-navigation: #{$palette-color-bluebell-15};
19
- $border-dots-navigation: #{$palette-color-fk-black-50};
20
- $scrollbar-navigation: #{$palette-color-fk-black-50};
21
-
22
14
  .layout-navigation {
23
15
  min-height: 100%;
24
16
  width: 100%;
@@ -36,7 +28,7 @@ $scrollbar-navigation: #{$palette-color-fk-black-50};
36
28
  }
37
29
 
38
30
  &__navigation {
39
- background-color: #{$background-navigation};
31
+ background-color: $layout-navigation-color-background;
40
32
  display: flex;
41
33
  position: fixed;
42
34
  z-index: $ZINDEX;
@@ -45,12 +37,12 @@ $scrollbar-navigation: #{$palette-color-fk-black-50};
45
37
  }
46
38
 
47
39
  &__navigation .button.button--tertiary:hover {
48
- background-color: var(--f-background-sidepanel-button-tertiary-hover);
40
+ background-color: $layout-navigation-button-tertiary-color-background-hover;
49
41
  }
50
42
 
51
43
  &__navigation__border {
52
44
  width: #{$layout-navigation-border-width};
53
- background-color: #{$background-navigation};
45
+ background-color: $layout-navigation-resize-handle-color-background-default;
54
46
  cursor: w-resize;
55
47
  flex-shrink: 0;
56
48
  display: flex;
@@ -59,7 +51,7 @@ $scrollbar-navigation: #{$palette-color-fk-black-50};
59
51
  flex-direction: column;
60
52
 
61
53
  &__dot {
62
- background-color: #{$border-dots-navigation};
54
+ background-color: $layout-navigation-resize-handle-dot-color-background;
63
55
  width: #{$layout-navigation-dot-diameter};
64
56
  height: #{$layout-navigation-dot-diameter};
65
57
  border-radius: 2px;
@@ -68,7 +60,7 @@ $scrollbar-navigation: #{$palette-color-fk-black-50};
68
60
  }
69
61
 
70
62
  &__navigation__border:hover {
71
- background-color: #{$border-hover-navigation};
63
+ background-color: $layout-navigation-resize-handle-color-background-hover;
72
64
  }
73
65
 
74
66
  &__navigation__inner {
@@ -107,8 +99,8 @@ $scrollbar-navigation: #{$palette-color-fk-black-50};
107
99
  }
108
100
 
109
101
  &::-webkit-scrollbar-thumb {
110
- background: #{$scrollbar-navigation};
111
- border: 1px solid #{$scrollbar-navigation};
102
+ background: $layout-navigation-scrollbar-thumb-color-background;
103
+ border: 1px solid $layout-navigation-scrollbar-thumb-color-background;
112
104
  box-sizing: border-box;
113
105
  border-radius: 33px;
114
106
  }
package/src/components/layout-navigation/_variables.scss CHANGED
@@ -1 +1,6 @@
1
- // stylelint-disable no-empty-source -- placeholder file
1
+ $layout-navigation-color-background: var(--fkds-color-background-secondary) !default;
2
+ $layout-navigation-resize-handle-color-background-default: var(--fkds-color-background-secondary) !default;
3
+ $layout-navigation-resize-handle-color-background-hover: var(--fkds-color-action-background-secondary-hover) !default;
4
+ $layout-navigation-resize-handle-dot-color-background: var(--fkds-color-action-text-secondary-default) !default;
5
+ $layout-navigation-scrollbar-thumb-color-background: var(--fkds-color-border-primary) !default;
6
+ $layout-navigation-button-tertiary-color-background-hover: var(--fkds-color-action-background-secondary-hover) !default;
package/src/components/layout-secondary/_layout-secondary.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @use "../z-index";
2
+ @use "variables" as *;
2
3
 
3
4
  $ZINDEX: z-index.$MODAL_ZINDEX - 1 !default;
4
5
 
@@ -10,15 +11,6 @@ $layout-secondary-content-padding: 4px !default;
10
11
  $layout-secondary-dot-diameter: 4px !default;
11
12
  $layout-secondary-dot-spacing: 4px !default;
12
13
 
13
- // Colors
14
- $palette-color-fk-black-5: #f4f4f4 !default;
15
- $palette-color-fk-black-50: #8d8e91 !default;
16
- $palette-color-bluebell-15: #e5e5f5 !default;
17
- $background-secondary: #{$palette-color-fk-black-5};
18
- $border-hover-secondary: #{$palette-color-bluebell-15};
19
- $border-dots-secondary: #{$palette-color-fk-black-50};
20
- $scrollbar-secondary: #{$palette-color-fk-black-50};
21
-
22
14
  .layout-secondary {
23
15
  width: 100%;
24
16
  min-height: 100%;
@@ -36,7 +28,7 @@ $scrollbar-secondary: #{$palette-color-fk-black-50};
36
28
  }
37
29
 
38
30
  &__secondary {
39
- background-color: #{$background-secondary};
31
+ background-color: $layout-secondary-color-background;
40
32
  position: fixed;
41
33
  display: flex;
42
34
  right: 0;
@@ -44,12 +36,12 @@ $scrollbar-secondary: #{$palette-color-fk-black-50};
44
36
  z-index: $ZINDEX;
45
37
 
46
38
  .button.button--tertiary:hover {
47
- background-color: var(--f-background-sidepanel-button-tertiary-hover);
39
+ background-color: $layout-secondary-button-tertiary-color-background-hover;
48
40
  }
49
41
 
50
42
  &__border {
51
43
  width: #{$layout-secondary-border-width};
52
- background-color: #{$background-secondary};
44
+ background-color: $layout-secondary-resize-handle-color-background-default;
53
45
  cursor: w-resize;
54
46
  flex-shrink: 0;
55
47
  display: flex;
@@ -58,7 +50,7 @@ $scrollbar-secondary: #{$palette-color-fk-black-50};
58
50
  flex-direction: column;
59
51
 
60
52
  &__dot {
61
- background-color: #{$border-dots-secondary};
53
+ background-color: $layout-secondary-resize-handle-dot-color-background;
62
54
  width: #{$layout-secondary-dot-diameter};
63
55
  height: #{$layout-secondary-dot-diameter};
64
56
  border-radius: 2px;
@@ -67,7 +59,7 @@ $scrollbar-secondary: #{$palette-color-fk-black-50};
67
59
  }
68
60
 
69
61
  &__border:hover {
70
- background-color: #{$border-hover-secondary};
62
+ background-color: $layout-secondary-resize-handle-color-background-hover;
71
63
  }
72
64
 
73
65
  &__inner {
@@ -108,8 +100,8 @@ $scrollbar-secondary: #{$palette-color-fk-black-50};
108
100
  }
109
101
 
110
102
  &::-webkit-scrollbar-thumb {
111
- background: #{$scrollbar-secondary};
112
- border: 1px solid #{$scrollbar-secondary};
103
+ background: $layout-secondary-scrollbar-thumb-color-background;
104
+ border: 1px solid $layout-secondary-scrollbar-thumb-color-background;
113
105
  box-sizing: border-box;
114
106
  border-radius: 33px;
115
107
  }
package/src/components/layout-secondary/_variables.scss CHANGED
@@ -1 +1,6 @@
1
- // stylelint-disable no-empty-source -- placeholder file
1
+ $layout-secondary-color-background: var(--fkds-color-background-secondary) !default;
2
+ $layout-secondary-resize-handle-color-background-default: var(--fkds-color-background-secondary) !default;
3
+ $layout-secondary-resize-handle-color-background-hover: var(--fkds-color-action-background-secondary-hover) !default;
4
+ $layout-secondary-resize-handle-dot-color-background: var(--fkds-color-action-text-secondary-default) !default;
5
+ $layout-secondary-scrollbar-thumb-color-background: var(--fkds-color-border-primary) !default;
6
+ $layout-secondary-button-tertiary-color-background-hover: var(--fkds-color-action-background-secondary-hover) !default;
package/src/components/table-ng/_cell.scss CHANGED
@@ -84,15 +84,20 @@ $cell-border-width: 1px;
84
84
  }
85
85
  }
86
86
 
87
+ &--text:hover:has(.table-ng__textedit:focus) {
88
+ background: transparent;
89
+ }
90
+
87
91
  .table-ng__editable {
88
92
  min-block-size: $editable-min-height;
89
93
 
90
94
  &:focus-within {
91
95
  box-shadow: inset 0 (-$underline-thickness) 0 0 $table-ng-cell-color-underline;
92
96
  border-radius: 0;
97
+ background: transparent;
93
98
  }
94
99
 
95
- &:hover {
100
+ &:hover:not(:focus-within) {
96
101
  box-shadow: inset 0 (-$underline-thickness) 0 0 $table-ng-cell-color-underline;
97
102
  border-radius: 0;
98
103
  }
@@ -251,6 +256,19 @@ $cell-border-width: 1px;
251
256
  }
252
257
  }
253
258
 
259
+ .table-ng__cell--select:has([role="combobox"][aria-expanded="true"]) {
260
+ background: transparent;
261
+
262
+ .table-ng__editable,
263
+ .table-ng__editable:hover,
264
+ .table-ng__editable:hover:not(:focus-within),
265
+ .table-ng__editable:focus,
266
+ .table-ng__editable:focus-within {
267
+ box-shadow: none;
268
+ border-radius: 0;
269
+ }
270
+ }
271
+
254
272
  .table-ng__textedit {
255
273
  flex: 0 1 0;
256
274
  width: 0;
@@ -301,6 +319,15 @@ $cell-border-width: 1px;
301
319
  border-radius: 0;
302
320
  }
303
321
 
322
+ .table-ng__cell--select:has([role="combobox"][aria-expanded="true"]) .table-ng__editable,
323
+ .table-ng__cell--select:has([role="combobox"][aria-expanded="true"]) .table-ng__editable:hover,
324
+ .table-ng__cell--select:has([role="combobox"][aria-expanded="true"]) .table-ng__editable:hover:not(:focus-within),
325
+ .table-ng__cell--select:has([role="combobox"][aria-expanded="true"]) .table-ng__editable:focus,
326
+ .table-ng__cell--select:has([role="combobox"][aria-expanded="true"]) .table-ng__editable:focus-within {
327
+ box-shadow: none;
328
+ border-radius: 0;
329
+ }
330
+
304
331
  .table-ng [tabindex="0"]:focus,
305
332
  .table-ng [tabindex="0"]:focus-visible {
306
333
  outline: $table-ng-selection-outline solid CanvasText;
package/src/core/mixins/_focus.scss CHANGED
@@ -1,5 +1,6 @@
1
+ $focus-box-shadow: var(--f-focus-box-shadow) !default;
2
+
1
3
  @mixin focus-indicator() {
2
- border-radius: 0;
3
- box-shadow: var(--f-focus-box-shadow);
4
+ box-shadow: $focus-box-shadow;
4
5
  outline: 3px solid transparent; // Windows high contrast
5
6
  }
package/src/internal-components/calendar-month/_calendar-month.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @use "../../components/z-index";
2
+ @use "../../core/mixins/focus";
2
3
  @use "variables" as *;
3
4
 
4
5
  $days: 7;
@@ -66,7 +67,7 @@ $day-width: calc((100% - $week-width) / $days);
66
67
  z-index: z-index.$CALENDAR_MONTH;
67
68
 
68
69
  &[tabindex="-1"] {
69
- box-shadow: var(--f-focus-box-shadow);
70
+ box-shadow: focus.$focus-box-shadow;
70
71
  }
71
72
  }
72
73
  }
package/src/internal-components/calendar-navbar/_calendar-navbar.scss CHANGED
@@ -47,7 +47,7 @@ $calendar-icon-forced-colors-padding: calc($calendar-icon-padding - $calendar-ic
47
47
  &__year-selector-button {
48
48
  /* stylelint-disable scss/at-extend-no-missing-placeholder -- technical debt */
49
49
  @extend .button--margin-bottom-0;
50
- @extend .button--tertiary--black;
50
+ @extend .button--tertiary--muted;
51
51
  @extend .button--tertiary;
52
52
  @extend .button;
53
53