@fkui/design 6.21.0 → 6.23.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 (34) hide show
  1. package/lib/fkui.css +201 -91
  2. package/lib/fkui.min.css +1 -1
  3. package/package.json +5 -5
  4. package/src/components/button/_variables.scss +0 -5
  5. package/src/components/calendar-day/_calendar-day.scss +15 -0
  6. package/src/components/checkbox/_variables.scss +2 -2
  7. package/src/components/chip/_chip.scss +11 -1
  8. package/src/components/combobox/_combobox.scss +6 -1
  9. package/src/components/combobox/_variables.scss +2 -2
  10. package/src/components/contextmenu/_contextmenu.scss +2 -0
  11. package/src/components/datepicker-field/_variables.scss +3 -3
  12. package/src/components/dialogue-tree/_dialogue-tree.scss +0 -1
  13. package/src/components/file-item/_file-item.scss +2 -1
  14. package/src/components/file-item/_variables.scss +1 -1
  15. package/src/components/icon/_icon.scss +16 -3
  16. package/src/components/icon/_variables.scss +17 -8
  17. package/src/components/message-box/_variables.scss +1 -1
  18. package/src/components/modal/_modal.scss +1 -0
  19. package/src/components/select-field/_select-field.scss +1 -1
  20. package/src/components/select-field/_variables.scss +3 -2
  21. package/src/components/table/_table.scss +31 -28
  22. package/src/components/table/_table_button.scss +1 -0
  23. package/src/components/table/_variables.scss +9 -9
  24. package/src/components/table-ng/_table-ng.scss +13 -0
  25. package/src/components/text-field/_text-field.scss +5 -1
  26. package/src/components/text-field/_variables.scss +3 -2
  27. package/src/components/wizard/_variables.scss +1 -1
  28. package/src/core/mixins/_focus.scss +1 -1
  29. package/src/core/mixins/_forcedcolors.scss +16 -0
  30. package/src/internal-components/calendar-navbar/_variables.scss +2 -2
  31. package/src/internal-components/popup-error/_popup-error.scss +1 -0
  32. package/src/internal-components/popup-error/_variables.scss +3 -2
  33. package/stylelint/rules/deprecated-variable.js +2 -2
  34. package/stylelint/rules/deprecated-variable.test.mjs +8 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fkui/design",
3
- "version": "6.21.0",
3
+ "version": "6.23.0",
4
4
  "description": "fkui design",
5
5
  "keywords": [
6
6
  "fkui",
@@ -39,8 +39,8 @@
39
39
  "unit:watch": "node --test --watch"
40
40
  },
41
41
  "devDependencies": {
42
- "@fkui/icon-lib-default": "6.21.0",
43
- "@fkui/theme-default": "6.21.0",
42
+ "@fkui/icon-lib-default": "6.23.0",
43
+ "@fkui/theme-default": "6.23.0",
44
44
  "autoprefixer": "10.4.21",
45
45
  "cssnano": "7.1.1",
46
46
  "glob": "11.0.3",
@@ -51,7 +51,7 @@
51
51
  "svgo": "4.0.0"
52
52
  },
53
53
  "peerDependencies": {
54
- "@fkui/theme-default": "^6.21.0",
54
+ "@fkui/theme-default": "^6.23.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": "300d22abdfd674d0d2aad5e710773cb83b38152a"
71
+ "gitHead": "fa6f480d4762eb6f01607c7fc9d9de58e2d946c0"
72
72
  }
package/src/components/button/_variables.scss CHANGED
@@ -20,19 +20,14 @@ $button-tertiary-color-text-hover: var(--fkds-color-action-text-primary-default)
20
20
 
21
21
  // TERTIARY - black
22
22
  $button-tertiary-black-color-text-default: var(--fkds-color-action-text-secondary-default) !default;
23
- $button-tertiary-black-icon-color-content-default: var(--fkds-icon-color-action-content-secondary-default) !default;
24
23
  $button-tertiary-black-color-text-focus: var(--fkds-color-action-text-secondary-default) !default;
25
- $button-tertiary-black-icon-color-content-focus: var(--fkds-icon-color-action-content-secondary-default) !default;
26
24
 
27
25
  // TERTIARY - inverted
28
26
  $button-tertiary-inverted-color-text-default: var(--fkds-color-action-text-inverted-default) !default;
29
- $button-tertiary-inverted-icon-color-content-default: var(--fkds-icon-color-action-content-inverted-default) !default;
30
27
  $button-tertiary-inverted-color-text-focus: var(--fkds-color-action-text-inverted-focus) !default;
31
- $button-tertiary-inverted-icon-color-content-focus: var(--fkds-icon-color-action-content-inverted-default) !default;
32
28
  $button-tertiary-inverted-color-background-focus: transparent !default;
33
29
  $button-tertiary-inverted-color-background-disabled: transparent !default;
34
30
  $button-tertiary-inverted-color-text-disabled: var(--fkds-color-text-disabled) !default;
35
- $button-tertiary-inverted-icon-color-content-disabled: var(--fkds-icon-color-content-disabled) !default;
36
31
 
37
32
  // Inflight animation
38
33
  $button-spinner-animation-duration: 1250ms !default;
package/src/components/calendar-day/_calendar-day.scss CHANGED
@@ -1,5 +1,6 @@
1
1
  @use "../../core/mixins/circle";
2
2
  @use "variables" as *;
3
+ @use "../../core/mixins/forcedcolors";
3
4
 
4
5
  $calendar-highlight-border: var(--f-border-width-small) solid $calendarday-highlight-color-border-default;
5
6
 
@@ -27,12 +28,20 @@ $calendar-highlight-border: var(--f-border-width-small) solid $calendarday-highl
27
28
  &.calendar-day--selected {
28
29
  &::before {
29
30
  border: var(--f-border-width-medium) solid $calendarday-highlight-color-border-selected;
31
+
32
+ @media (forced-colors: active) {
33
+ border-color: highlightText;
34
+ }
30
35
  }
31
36
  }
32
37
 
33
38
  &:active:not(&--disabled) {
34
39
  &::before {
35
40
  border: var(--f-border-width-medium) solid $calendarday-highlight-color-border-selected;
41
+
42
+ @media (forced-colors: active) {
43
+ border-color: highlightText;
44
+ }
36
45
  }
37
46
  }
38
47
 
@@ -60,6 +69,8 @@ $calendar-highlight-border: var(--f-border-width-small) solid $calendarday-highl
60
69
  &--selected {
61
70
  color: $calendarday-color-text-selected;
62
71
  background-color: $calendarday-color-background-selected;
72
+
73
+ @include forcedcolors.selected-indicator;
63
74
  }
64
75
 
65
76
  &--disabled {
@@ -77,11 +88,15 @@ $calendar-highlight-border: var(--f-border-width-small) solid $calendarday-highl
77
88
  &--hover:not(&--disabled, &--selected) {
78
89
  background-color: $calendarday-color-background-hover;
79
90
  color: $calendarday-color-text-hover;
91
+
92
+ @include forcedcolors.hover-indicator(border, 2px);
80
93
  }
81
94
 
82
95
  &:active:not(&--disabled),
83
96
  &--active:not(&--disabled) {
84
97
  color: $calendarday-color-text-selected;
85
98
  background-color: $calendarday-color-background-selected;
99
+
100
+ @include forcedcolors.selected-indicator;
86
101
  }
87
102
  }
package/src/components/checkbox/_variables.scss CHANGED
@@ -3,8 +3,8 @@ $checkbox-color-text-default: var(--fkds-color-text-primary) !default;
3
3
  $checkbox-color-text-disabled: var(--fkds-color-text-disabled) !default;
4
4
 
5
5
  // ICON
6
- $checkbox-icon-color-content: var(--fkds-icon-color-content-inverted) !default;
7
- $checkbox-icon-color-content-disabled: var(--fkds-icon-color-content-disabled) !default;
6
+ $checkbox-icon-color-content: var(--fkds-color-text-inverted) !default;
7
+ $checkbox-icon-color-content-disabled: var(--fkds-color-text-disabled) !default;
8
8
 
9
9
  // BACKGROUND
10
10
  $checkbox-color-background-default: var(--fkds-color-background-primary) !default;
package/src/components/chip/_chip.scss CHANGED
@@ -1,8 +1,10 @@
1
1
  @use "../../core/size";
2
2
  @use "../../core/mixins/breakpoints" as bp;
3
+ @use "../../core/mixins/forcedcolors";
3
4
  @use "variables" as *;
4
5
 
5
6
  $chip-border-radius: 20px;
7
+ $chip-border-width: var(--f-border-width-medium);
6
8
 
7
9
  @mixin chip($group, $item, $type) {
8
10
  .#{$group}--chip {
@@ -24,6 +26,10 @@ $chip-border-radius: 20px;
24
26
  border-color: $chip-color-border-disabled;
25
27
  color: $chip-color-text-disabled;
26
28
  cursor: not-allowed;
29
+
30
+ @media (forced-colors: active) {
31
+ color: GrayText;
32
+ }
27
33
  }
28
34
  }
29
35
  }
@@ -35,7 +41,7 @@ $chip-border-radius: 20px;
35
41
  font-weight: var(--f-font-weight-medium);
36
42
  padding: size.$padding-050 size.$padding-100;
37
43
  border-radius: $chip-border-radius;
38
- border: var(--f-border-width-medium) solid $chip-color-border-default;
44
+ border: $chip-border-width solid $chip-color-border-default;
39
45
  background-color: $chip-color-background-default;
40
46
  color: $chip-color-text-default;
41
47
  justify-content: center;
@@ -56,12 +62,16 @@ $chip-border-radius: 20px;
56
62
  border-color: $chip-color-border-hover;
57
63
  background-color: $chip-color-background-hover;
58
64
  color: $chip-color-text-hover;
65
+
66
+ @include forcedcolors.hover-indicator(border, $chip-border-width);
59
67
  }
60
68
 
61
69
  input[type="#{$type}"]:checked + .#{$item}__label {
62
70
  background: $chip-color-background-selected;
63
71
  border-color: $chip-color-border-selected;
64
72
  color: $chip-color-text-selected;
73
+
74
+ @include forcedcolors.selected-indicator;
65
75
  }
66
76
 
67
77
  input[type="#{$type}"]:focus + label.#{$item}__label {
package/src/components/combobox/_combobox.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @use "variables" as *;
2
+ @use "../../core/mixins/forcedcolors";
2
3
 
3
4
  .popup .popup__wrapper.combobox__listbox {
4
5
  background-color: $combobox-color-background;
@@ -26,15 +27,19 @@
26
27
  padding: 0.75rem;
27
28
  white-space: nowrap;
28
29
 
29
- &:hover {
30
+ &:hover:not(&--highlight) {
30
31
  background-color: $combobox-color-background-hover;
31
32
  color: $combobox-color-text-hover;
33
+
34
+ @include forcedcolors.hover-indicator(outline, 2px);
32
35
  }
33
36
 
34
37
  &--highlight {
35
38
  background-color: $combobox-color-background-selected;
36
39
  color: $combobox-color-text-selected;
37
40
  font-weight: var(--f-font-weight-medium);
41
+
42
+ @include forcedcolors.selected-indicator;
38
43
  }
39
44
  }
40
45
 
package/src/components/combobox/_variables.scss CHANGED
@@ -5,5 +5,5 @@ $combobox-color-text-hover: var(--fkds-color-text-primary) !default;
5
5
  $combobox-color-text-selected: var(--fkds-color-text-inverted) !default;
6
6
  $combobox-color-text: var(--fkds-color-text-primary) !default;
7
7
  $combobox-color-border: var(--fkds-color-border-primary) !default;
8
- $combobox-f-icon-arrow-down-color-content-default: var(--fkds-icon-color-action-content-primary-default) !default;
9
- $combobox-f-icon-arrow-down-color-content-disabled: var(--fkds-icon-color-content-disabled) !default;
8
+ $combobox-f-icon-arrow-down-color-content-default: var(--fkds-color-action-text-primary-default) !default;
9
+ $combobox-f-icon-arrow-down-color-content-disabled: var(--fkds-color-text-disabled) !default;
package/src/components/contextmenu/_contextmenu.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  @use "../../core/size";
2
2
  @use "../../core/mixins/breakpoints";
3
3
  @use "../../core/config-variables";
4
+ @use "../../core/mixins/forcedcolors";
4
5
  @use "variables" as *;
5
6
 
6
7
  .contextmenu {
@@ -31,6 +32,7 @@
31
32
  &:hover {
32
33
  color: $contextmenu-color-text-hover;
33
34
  background-color: $contextmenu-color-item-background-hover;
35
+ @include forcedcolors.hover-indicator(outline, 2px);
34
36
  }
35
37
 
36
38
  // when desktop, long texts expands popup
package/src/components/datepicker-field/_variables.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  // CALENDAR ICON BUTTON
2
- $datepickerfield-f-icon-calendar-color-content-default: var(--fkds-icon-color-action-content-primary-default) !default;
3
- $datepickerfield-f-icon-calendar-color-content-hover: var(--fkds-icon-color-action-content-primary-hover) !default;
4
- $datepickerfield-f-icon-calendar-color-content-disabled: var(--fkds-icon-color-content-disabled) !default;
2
+ $datepickerfield-f-icon-calendar-color-content-default: var(--fkds-color-action-text-primary-default) !default;
3
+ $datepickerfield-f-icon-calendar-color-content-hover: var(--fkds-color-action-text-primary-hover) !default;
4
+ $datepickerfield-f-icon-calendar-color-content-disabled: var(--fkds-color-text-disabled) !default;
5
5
 
6
6
  // Popup
7
7
  $datepickerfield-popup-color-background: var(--fkds-color-background-primary) !default;
package/src/components/dialogue-tree/_dialogue-tree.scss CHANGED
@@ -49,7 +49,6 @@
49
49
  .icon {
50
50
  flex-shrink: 0;
51
51
  margin-left: 1.25rem;
52
- color: currentcolor;
53
52
  }
54
53
  }
55
54
  }
package/src/components/file-item/_file-item.scss CHANGED
@@ -1,5 +1,6 @@
1
1
  @use "../anchor/anchor";
2
2
  @use "../../core/size";
3
+ @use "variables" as *;
3
4
 
4
5
  .file-item-list {
5
6
  list-style-type: none;
@@ -45,7 +46,7 @@
45
46
  flex: 0 0 auto;
46
47
 
47
48
  svg {
48
- color: var(--f-icon-color-error);
49
+ color: $fileitem-color-icon-error;
49
50
  }
50
51
  }
51
52
 
package/src/components/file-item/_variables.scss CHANGED
@@ -1 +1 @@
1
- // stylelint-disable no-empty-source -- placeholder file
1
+ $fileitem-color-icon-error: var(--fkds-color-feedback-text-negative);
package/src/components/icon/_icon.scss CHANGED
@@ -85,12 +85,12 @@
85
85
 
86
86
  &--tooltip {
87
87
  .f-icon-circle {
88
- fill: var(--f-icon-color-info);
89
- color: var(--f-icon-color-info);
88
+ fill: $icon-tooltip-color-background;
89
+ color: $icon-tooltip-color-border;
90
90
  }
91
91
 
92
92
  .f-icon-i {
93
- color: var(--f-icon-color-white);
93
+ color: $icon-tooltip-color-content;
94
94
  }
95
95
  }
96
96
 
@@ -99,6 +99,10 @@
99
99
  color: $icon-info-color-background;
100
100
  fill: $icon-info-color-border;
101
101
  }
102
+
103
+ .f-icon-i {
104
+ color: $icon-info-color-content;
105
+ }
102
106
  }
103
107
 
104
108
  &--warning {
@@ -106,6 +110,10 @@
106
110
  color: $icon-warning-color-background;
107
111
  fill: $icon-warning-color-border;
108
112
  }
113
+
114
+ .f-icon-alert {
115
+ color: $icon-warning-color-content;
116
+ }
109
117
  }
110
118
 
111
119
  &--error {
@@ -113,6 +121,10 @@
113
121
  color: $icon-error-color-background;
114
122
  fill: $icon-error-color-border;
115
123
  }
124
+
125
+ .f-icon-alert {
126
+ color: $icon-error-color-content;
127
+ }
116
128
  }
117
129
 
118
130
  &--success {
@@ -121,6 +133,7 @@
121
133
  fill: $icon-success-color-border;
122
134
  }
123
135
  .f-icon-success {
136
+ color: $icon-success-color-content;
124
137
  transform: scale(0.6);
125
138
  }
126
139
  }
package/src/components/icon/_variables.scss CHANGED
@@ -1,15 +1,24 @@
1
1
  // INFO
2
- $icon-info-color-border: var(--fkds-icon-color-feedback-border-info) !default;
3
- $icon-info-color-background: var(--fkds-icon-color-feedback-background-info) !default;
2
+ $icon-info-color-border: var(--fkds-color-feedback-border-info) !default;
3
+ $icon-info-color-background: var(--fkds-color-feedback-background-info) !default;
4
+ $icon-info-color-content: var(--fkds-color-text-primary) !default;
4
5
 
5
6
  // WARNING
6
- $icon-warning-color-border: var(--fkds-icon-color-feedback-border-warning) !default;
7
- $icon-warning-color-background: var(--fkds-icon-color-feedback-background-warning) !default;
7
+ $icon-warning-color-border: var(--fkds-color-feedback-border-warning) !default;
8
+ $icon-warning-color-background: var(--fkds-color-feedback-background-warning) !default;
9
+ $icon-warning-color-content: var(--fkds-color-text-primary) !default;
8
10
 
9
11
  // ERROR
10
- $icon-error-color-border: var(--fkds-icon-color-feedback-border-negative) !default;
11
- $icon-error-color-background: var(--fkds-icon-color-feedback-background-negative) !default;
12
+ $icon-error-color-border: var(--fkds-color-feedback-border-negative) !default;
13
+ $icon-error-color-background: var(--fkds-color-feedback-background-negative) !default;
14
+ $icon-error-color-content: var(--fkds-color-text-primary) !default;
12
15
 
13
16
  // SUCCESS
14
- $icon-success-color-border: var(--fkds-icon-color-feedback-border-positive) !default;
15
- $icon-success-color-background: var(--fkds-icon-color-feedback-background-positive) !default;
17
+ $icon-success-color-border: var(--fkds-color-feedback-border-positive) !default;
18
+ $icon-success-color-background: var(--fkds-color-feedback-background-positive) !default;
19
+ $icon-success-color-content: var(--fkds-color-text-primary) !default;
20
+
21
+ // TOOLTIP
22
+ $icon-tooltip-color-background: var(--fkds-color-action-background-primary-default);
23
+ $icon-tooltip-color-border: var(--fkds-color-action-border-primary-default);
24
+ $icon-tooltip-color-content: var(--fkds-color-text-inverted);
package/src/components/message-box/_variables.scss CHANGED
@@ -7,5 +7,5 @@ $messagebox-warning-color-border: var(--fkds-color-feedback-border-warning) !def
7
7
  $messagebox-success-color-background: var(--fkds-color-feedback-background-positive) !default;
8
8
  $messagebox-success-color-border: var(--fkds-color-feedback-border-positive) !default;
9
9
  $messagebox-info-color-heading: var(--fkds-color-text-primary) !default;
10
- $messagebox-error-icon-error-color-border: var(--fkds-icon-color-feedback-content-negative) !default;
10
+ $messagebox-error-icon-error-color-border: var(--fkds-color-feedback-text-negative) !default;
11
11
  $messagebox-color-text-default: var(--fkds-color-text-primary) !default;
package/src/components/modal/_modal.scss CHANGED
@@ -87,6 +87,7 @@ $modal-width: calc(100vw - 40px) !default; // 100% - 20px each side;
87
87
 
88
88
  .modal__dialog {
89
89
  min-height: 100vh;
90
+ min-height: 100dvh;
90
91
  }
91
92
 
92
93
  .modal__dialog-inner {
package/src/components/select-field/_select-field.scss CHANGED
@@ -69,7 +69,7 @@
69
69
  }
70
70
 
71
71
  &__error-popup-icon {
72
- color: var(--f-text-color-error);
72
+ color: $selectfield-color-icon-error;
73
73
  display: inline;
74
74
  position: absolute;
75
75
  right: calc(var(--f-icon-size-large) + 0.75rem);
package/src/components/select-field/_variables.scss CHANGED
@@ -3,8 +3,9 @@ $selectfield-color-text-default: var(--fkds-color-text-primary) !default;
3
3
  $selectfield-color-text-disabled: var(--fkds-color-text-disabled) !default;
4
4
 
5
5
  // ICON
6
- $selectfield-icon-color-content-disabled: var(--fkds-icon-color-content-disabled) !default;
7
- $selectfield-f-icon-arrow-down-color-content-default: var(--fkds-icon-color-action-content-primary-default) !default;
6
+ $selectfield-icon-color-content-disabled: var(--fkds-color-text-disabled) !default;
7
+ $selectfield-f-icon-arrow-down-color-content-default: var(--fkds-color-action-text-primary-default) !default;
8
+ $selectfield-color-icon-error: var(--fkds-color-feedback-text-negative);
8
9
 
9
10
  // BACKGROUND
10
11
  $selectfield-color-background-hover: var(--fkds-color-action-background-secondary-hover) !default;
package/src/components/table/_table.scss CHANGED
@@ -8,13 +8,13 @@ $table-focus-size: 2px !default;
8
8
  $table-margin: 0 0 core.densify(var(--f-margin-component-bottom)) !default;
9
9
 
10
10
  // Header
11
- $table-header-separator: 1px solid var(--f-border-color-grid) !default;
11
+ $table-header-separator: 1px solid var(--fkds-color-border-primary) !default;
12
12
  $table-header-padding: core.densify(size.$padding-025) size.$padding-050 !default;
13
13
  $table-header-font-weight: var(--f-font-weight-medium) !default;
14
14
 
15
15
  // Column description
16
- $table-description-foreground: var(--f-text-color-discrete) !default;
17
- $table-description-background: transparent !default;
16
+ $table-color-description-text: var(--fkds-color-text-secondary) !default;
17
+ $table-color-description-background: transparent !default;
18
18
  $table-description-font-weight: var(--f-font-weight-normal) !default;
19
19
 
20
20
  // Rows
@@ -37,42 +37,42 @@ $table-input-offset-horizontal: 0.25rem;
37
37
  }
38
38
 
39
39
  %table-row-normal {
40
- background: $table-row-background;
41
- color: $table-row-foreground;
40
+ background: $table-color-row-background;
41
+ color: $table-color-row-text;
42
42
  }
43
43
 
44
44
  %table-row-striped {
45
- background: $table-row-background-alt;
46
- color: $table-row-foreground;
45
+ background: $table-color-row-background-alt;
46
+ color: $table-color-row-text;
47
47
  }
48
48
 
49
49
  %table-row-hover {
50
- background: var(--f-background-grid-hover);
51
- color: $table-row-foreground;
52
- outline: 1px solid var(--f-border-color-grid-hover);
50
+ background: var(--fkds-color-select-background-primary-hover);
51
+ color: $table-color-row-text;
52
+ outline: 1px solid var(--fkds-color-border-primary);
53
53
  }
54
54
 
55
55
  %table-row-focus-within {
56
- background: var(--f-background-grid-focus-inner);
57
- color: $table-row-foreground;
56
+ background: var(--fkds-color-select-background-primary-hover);
57
+ color: $table-color-row-text;
58
58
  }
59
59
 
60
60
  %table-row-focus {
61
- background: var(--f-background-grid-hover);
62
- color: $table-row-foreground;
63
- outline: $table-focus-size solid var(--f-color-focus);
61
+ background: var(--fkds-color-select-background-primary-hover);
62
+ color: $table-color-row-text;
63
+ outline: $table-focus-size solid var(--fkds-color-border-strong);
64
64
 
65
65
  // override shadow set by [tabindex]
66
66
  box-shadow: none;
67
67
  }
68
68
 
69
69
  %table-row-active {
70
- background: var(--f-background-grid-active);
71
- color: $table-row-foreground;
70
+ background: var(--fkds-color-select-background-primary-hover);
71
+ color: $table-color-row-text;
72
72
  }
73
73
 
74
74
  %table-row-expanded-border {
75
- border-bottom-color: var(--f-border-color-grid-expanded);
75
+ border-bottom-color: var(--fkds-color-border-weak);
76
76
  }
77
77
 
78
78
  %table-row-expandable {
@@ -98,15 +98,15 @@ $table-input-offset-horizontal: 0.25rem;
98
98
  // border color is used instead of dual-color shadow because when
99
99
  // combined with scroll the edges are cut by overflow of the container
100
100
  // element, especially on the right side.
101
- border-color: var(--f-color-focus);
101
+ border-color: var(--fkds-color-border-strong);
102
102
 
103
103
  // override shadow set by [tabindex]
104
104
  box-shadow: none;
105
105
  }
106
106
 
107
107
  caption {
108
- background: $table-caption-background;
109
- color: $table-caption-foreground;
108
+ background: $table-color-caption-background;
109
+ color: $table-color-caption-text;
110
110
  font-size: var(--f-font-size-standard);
111
111
  font-weight: var(--f-font-weight-medium);
112
112
  line-height: var(--f-line-height-large);
@@ -117,10 +117,10 @@ $table-input-offset-horizontal: 0.25rem;
117
117
 
118
118
  thead {
119
119
  th {
120
- background: $table-header-background;
120
+ background: $table-color-header-background;
121
121
  border-bottom: $table-header-border;
122
122
  border-right: $table-header-separator;
123
- color: $table-header-foreground;
123
+ color: $table-color-header-text;
124
124
  font-weight: $table-header-font-weight;
125
125
  line-height: var(--f-line-height-large);
126
126
  padding: $table-header-padding;
@@ -132,13 +132,12 @@ $table-input-offset-horizontal: 0.25rem;
132
132
  }
133
133
 
134
134
  .table__column__header__icon {
135
- color: var(--f-icon-color-table-header);
136
135
  height: var(--f-icon-size-x-small);
137
136
  width: var(--f-icon-size-x-small);
138
137
  min-width: var(--f-icon-size-x-small);
139
138
 
140
139
  &--discrete {
141
- color: var(--f-icon-color-table-header-discrete);
140
+ color: var(--fkds-color-text-disabled);
142
141
  }
143
142
  }
144
143
  }
@@ -292,8 +291,8 @@ $table-input-offset-horizontal: 0.25rem;
292
291
 
293
292
  &__description {
294
293
  display: block;
295
- background: $table-description-background;
296
- color: $table-description-foreground;
294
+ background: $table-color-description-background;
295
+ color: $table-color-description-text;
297
296
  font-weight: $table-description-font-weight;
298
297
  }
299
298
  }
@@ -374,7 +373,7 @@ $table-input-offset-horizontal: 0.25rem;
374
373
  }
375
374
 
376
375
  &__expand-icon {
377
- color: var(--f-icon-color-primary);
376
+ color: var(--fkds-color-action-text-primary-default);
378
377
  background: transparent;
379
378
  border: 0;
380
379
  flex: 0 0 auto;
@@ -385,5 +384,9 @@ $table-input-offset-horizontal: 0.25rem;
385
384
  display: flex;
386
385
  align-items: center;
387
386
  justify-content: center;
387
+
388
+ @media (forced-colors: active) {
389
+ color: ButtonText;
390
+ }
388
391
  }
389
392
  }
package/src/components/table/_table_button.scss CHANGED
@@ -14,6 +14,7 @@
14
14
  text-underline-offset: 3.5px;
15
15
  margin: var(--f-button-tertiary-table-column-action-margin);
16
16
  width: max-content;
17
+ border: none;
17
18
 
18
19
  .button__icon {
19
20
  margin: var(--f-button-tertiary-table-column-action-icon-margin);
package/src/components/table/_variables.scss CHANGED
@@ -1,14 +1,14 @@
1
1
  // Caption
2
- $table-caption-background: transparent !default;
3
- $table-caption-foreground: var(--f-text-color-default) !default;
2
+ $table-color-caption-background: transparent !default;
3
+ $table-color-caption-text: var(--fkds-color-text-primary) !default;
4
4
 
5
5
  // Header
6
- $table-header-background: var(--f-background-grid-header) !default;
7
- $table-header-foreground: var(--f-text-color-default) !default;
8
- $table-header-border: 2px solid var(--f-border-color-grid-header) !default;
6
+ $table-color-header-background: var(--fkds-color-background-secondary) !default;
7
+ $table-color-header-text: var(--fkds-color-text-primary) !default;
8
+ $table-header-border: 2px solid var(--fkds-color-border-primary) !default;
9
9
 
10
10
  // Rows
11
- $table-row-background: var(--f-background-grid-default) !default;
12
- $table-row-background-alt: var(--f-background-grid-striped) !default;
13
- $table-row-foreground: var(--f-text-color-default) !default;
14
- $table-row-separator: 1px solid var(--f-border-color-grid) !default;
11
+ $table-color-row-background: var(--fkds-color-background-primary) !default;
12
+ $table-color-row-background-alt: var(--fkds-color-background-secondary) !default;
13
+ $table-color-row-text: var(--fkds-color-text-primary) !default;
14
+ $table-row-separator: 1px solid var(--fkds-color-border-primary) !default;
package/src/components/table-ng/_table-ng.scss CHANGED
@@ -12,6 +12,11 @@ $table-ng-header-separator: 1px solid var(--f-border-color-grid) !default;
12
12
  $table-ng-header-padding: core.densify(size.$padding-025) size.$padding-050 !default;
13
13
  $table-ng-header-font-weight: var(--f-font-weight-medium) !default;
14
14
 
15
+ // Column description
16
+ $table-ng-description-foreground: var(--f-text-color-discrete) !default;
17
+ $table-ng-description-background: transparent !default;
18
+ $table-ng-description-font-weight: var(--f-font-weight-normal) !default;
19
+
15
20
  .table-ng {
16
21
  border-collapse: separate;
17
22
  border-spacing: 0;
@@ -59,6 +64,14 @@ $table-ng-header-font-weight: var(--f-font-weight-medium) !default;
59
64
  }
60
65
  }
61
66
 
67
+ &__column {
68
+ &__description {
69
+ background: $table-ng-description-background;
70
+ color: $table-ng-description-foreground;
71
+ font-weight: $table-ng-description-font-weight;
72
+ }
73
+ }
74
+
62
75
  &--striped tbody {
63
76
  .table-ng__row:nth-child(even) {
64
77
  background: $table-ng-row-background-alt;
package/src/components/text-field/_text-field.scss CHANGED
@@ -25,7 +25,7 @@
25
25
  }
26
26
 
27
27
  &__error-popup-icon {
28
- color: var(--f-text-color-error);
28
+ color: $textfield-color-icon-error;
29
29
  height: 16px;
30
30
  }
31
31
 
@@ -113,6 +113,10 @@
113
113
  color: $textfield-icon-close-color-content-default;
114
114
  height: var(--f-icon-size-x-small);
115
115
  width: var(--f-icon-size-x-small);
116
+
117
+ @media (forced-colors: active) {
118
+ color: buttonText;
119
+ }
116
120
  }
117
121
  }
118
122
 
package/src/components/text-field/_variables.scss CHANGED
@@ -8,8 +8,9 @@ $textfield-color-border-disabled: var(--fkds-color-border-disabled) !default;
8
8
  $textfield-color-border-error: var(--fkds-color-feedback-border-negative) !default;
9
9
 
10
10
  // ICON
11
- $textfield-icon-close-color-content-default: var(--fkds-icon-color-action-content-weak-default) !default;
12
- $textfield-icon-close-color-content-disabled: var(--fkds-icon-color-content-disabled) !default;
11
+ $textfield-icon-close-color-content-default: var(--fkds-color-text-secondary) !default;
12
+ $textfield-icon-close-color-content-disabled: var(--fkds-color-text-disabled) !default;
13
+ $textfield-color-icon-error: var(--fkds-color-feedback-text-negative) !default;
13
14
 
14
15
  // TEXT
15
16
  $textfield-color-text-default: var(--fkds-color-text-primary) !default;
package/src/components/wizard/_variables.scss CHANGED
@@ -15,4 +15,4 @@ $wizardstep-color-circle-background-pending: var(--fkds-color-background-primary
15
15
  $wizardstep-color-circle-background-done: var(--fkds-color-feedback-background-positive-strong) !default;
16
16
  $wizardstep-color-circle-content-open: var(--fkds-color-text-primary) !default;
17
17
  $wizardstep-color-circle-content-pending: var(--fkds-color-text-primary) !default;
18
- $wizardstep-color-circle-content-done: var(--fkds-icon-color-content-inverted) !default;
18
+ $wizardstep-color-circle-content-done: var(--fkds-color-text-inverted) !default;
package/src/core/mixins/_focus.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  @mixin focus-indicator() {
2
2
  border-radius: 0;
3
3
  box-shadow: var(--f-focus-box-shadow);
4
- outline: 2px solid transparent; // Windows high contrast
4
+ outline: 3px solid transparent; // Windows high contrast
5
5
  }