@fkui/design 6.10.0 → 6.12.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 (12) hide show
  1. package/lib/fkui.css +91 -45
  2. package/lib/fkui.min.css +1 -1
  3. package/package.json +9 -9
  4. package/src/components/checkbox/_checkbox.scss +32 -14
  5. package/src/components/checkbox/_variables.scss +16 -0
  6. package/src/components/dialogue-tree/_dialogue-tree.scss +7 -5
  7. package/src/components/dialogue-tree/_variables.scss +6 -0
  8. package/src/components/file-item/_file-item.scss +0 -11
  9. package/src/components/progressbar/_progressbar.scss +22 -12
  10. package/src/components/progressbar/_variables.scss +4 -0
  11. package/src/components/radio-button/_radio-button.scss +26 -19
  12. package/src/components/radio-button/_variables.scss +12 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fkui/design",
3
- "version": "6.10.0",
3
+ "version": "6.12.0",
4
4
  "description": "fkui design",
5
5
  "keywords": [
6
6
  "fkui",
@@ -21,7 +21,6 @@
21
21
  "./src/**/*.scss"
22
22
  ],
23
23
  "main": "./lib/fkui.css",
24
- "sass": "./src/fkui.scss",
25
24
  "types": "type-stub.d.ts",
26
25
  "files": [
27
26
  "lib",
@@ -42,22 +41,22 @@
42
41
  "runner": "jest-light-runner"
43
42
  },
44
43
  "devDependencies": {
45
- "@fkui/icon-lib-default": "6.10.0",
46
- "@fkui/theme-default": "6.10.0",
44
+ "@fkui/icon-lib-default": "6.12.0",
45
+ "@fkui/theme-default": "6.12.0",
47
46
  "autoprefixer": "10.4.21",
48
47
  "cssnano": "7.0.7",
49
48
  "flush-promises": "1.0.2",
50
- "glob": "11.0.2",
51
- "jest-light-runner": "0.7.8",
49
+ "glob": "11.0.3",
50
+ "jest-light-runner": "0.7.9",
52
51
  "jest-preset-stylelint": "7.3.0",
53
52
  "picocolors": "1.1.1",
54
- "postcss": "8.5.4",
53
+ "postcss": "8.5.5",
55
54
  "postcss-url": "10.1.3",
56
55
  "postcss-var-func-fallback": "3.0.1",
57
56
  "svgo": "3.3.2"
58
57
  },
59
58
  "peerDependencies": {
60
- "@fkui/theme-default": "^6.10.0",
59
+ "@fkui/theme-default": "^6.12.0",
61
60
  "sass": "^1.40.0",
62
61
  "stylelint": ">= 14"
63
62
  },
@@ -73,5 +72,6 @@
73
72
  "node": ">= 20",
74
73
  "npm": ">= 7"
75
74
  },
76
- "gitHead": "e9daf74232b7f96db6d4289338ad08c7bd6f61fa"
75
+ "sass": "./src/fkui.scss",
76
+ "gitHead": "fe2196dd13702045bf520240c52135a1b74ae2e3"
77
77
  }
package/src/components/checkbox/_checkbox.scss CHANGED
@@ -2,12 +2,14 @@
2
2
  @use "../../core/size";
3
3
  @use "../../core/mixins/focus" as *;
4
4
  @use "../../core/mixins/sr-only" as *;
5
+ @use "variables" as *;
5
6
 
6
7
  $checkbox_label_offset: 0.1rem;
7
8
  $CHECKBOX_SELECTOR: ".checkbox" !default;
8
9
 
9
- %checkbox-icon-white {
10
- background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE3LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxhZ2VyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAyMCAyMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAgMjAiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cmVjdCB4PSIzLjQ3NCIgeT0iOS4xOTQiIGZpbGw9IiMzQzU1OTIiIHdpZHRoPSIwIiBoZWlnaHQ9IjAiLz4KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTguMzc2LDE1LjAwNWMtMC40MTYsMC0wLjgzMi0wLjE1OC0xLjE0OS0wLjQ3NWwtMy4yNS0zLjI0M2MtMC42MzUtMC42MzQtMC42MzUtMS42NiwwLTIuMjkzCgljMC42MzUtMC42MzMsMS42NjMtMC42MzMsMi4yOTgsMGwyLjEwMSwyLjA5N2w1LjM1MS01LjM0YzAuNjM1LTAuNjM0LDEuNjYzLTAuNjM0LDIuMjk4LDBjMC42MzUsMC42MzMsMC42MzUsMS42NTksMCwyLjI5MwoJbC02LjUsNi40ODdDOS4yMDcsMTQuODQ3LDguNzkyLDE1LjAwNSw4LjM3NiwxNS4wMDV6Ii8+Cjwvc3ZnPgo=");
10
+ %checkbox-icon {
11
+ mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE3LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9ImNoZWNrYm94LWljb24iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgogICAgICAgICB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHJlY3QgeD0iMy40NzQiIHk9IjkuMTk0IiBmaWxsPSIjM0M1NTkyIiB3aWR0aD0iMCIgaGVpZ2h0PSIwIi8+CjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTguMzc2LDE1LjAwNWMtMC40MTYsMC0wLjgzMi0wLjE1OC0xLjE0OS0wLjQ3NWwtMy4yNS0zLjI0M2MtMC42MzUtMC42MzQtMC42MzUtMS42NiwwLTIuMjkzCiAgICAgICAgYzAuNjM1LTAuNjMzLDEuNjYzLTAuNjMzLDIuMjk4LDBsMi4xMDEsMi4wOTdsNS4zNTEtNS4zNGMwLjYzNS0wLjYzNCwxLjY2My0wLjYzNCwyLjI5OCwwYzAuNjM1LDAuNjMzLDAuNjM1LDEuNjU5LDAsMi4yOTMKICAgICAgICBsLTYuNSw2LjQ4N0M5LjIwNywxNC44NDcsOC43OTIsMTUuMDA1LDguMzc2LDE1LjAwNXoiLz4KPC9zdmc+Cg==");
12
+ mask-repeat: no-repeat;
11
13
  }
12
14
 
13
15
  #{$CHECKBOX_SELECTOR} {
@@ -56,8 +58,8 @@ $CHECKBOX_SELECTOR: ".checkbox" !default;
56
58
  }
57
59
 
58
60
  &::before {
59
- background: var(--f-background-input);
60
- border: var(--f-border-width-medium) solid var(--f-border-color-input);
61
+ background-color: $checkbox-color-background-default;
62
+ border: var(--f-border-width-medium) solid $checkbox-color-border-default;
61
63
  border-radius: var(--f-border-radius-small);
62
64
  cursor: pointer;
63
65
  display: block;
@@ -68,37 +70,53 @@ $CHECKBOX_SELECTOR: ".checkbox" !default;
68
70
  }
69
71
 
70
72
  &::after {
71
- @extend %checkbox-icon-white;
73
+ @extend %checkbox-icon;
72
74
 
73
- background-color: transparent;
75
+ background-color: $checkbox-icon-color-content;
74
76
  opacity: 0;
75
77
  transition: opacity ease var(--f-animation-duration-medium);
78
+ @media (forced-colors: active) {
79
+ background-color: Canvas;
80
+ }
76
81
  }
77
82
  }
78
83
 
79
84
  &.disabled {
80
- color: var(--f-text-color-input-disabled);
85
+ color: $checkbox-color-text-disabled;
86
+ @media (forced-colors: active) {
87
+ color: GrayText;
88
+ }
81
89
 
82
90
  #{$CHECKBOX_SELECTOR}__label {
83
91
  cursor: default;
84
92
 
85
93
  &::before {
86
- border: var(--f-border-width-medium) solid var(--f-text-color-input-disabled);
94
+ background-color: $checkbox-color-background-disabled;
95
+ border: var(--f-border-width-medium) solid $checkbox-color-border-disabled;
87
96
  cursor: inherit;
88
97
  }
89
98
  }
90
99
 
91
100
  input[type="checkbox"]:checked + label::before {
92
- background: var(--f-background-input-selected-disabled);
101
+ background-color: $checkbox-color-background-disabled;
102
+ border: var(--f-border-width-medium) solid $checkbox-color-border-disabled;
103
+ @media (forced-colors: active) {
104
+ border-color: GrayText;
105
+ }
93
106
  }
94
- }
95
107
 
96
- input[type="checkbox"]:checked + label::before {
97
- background-color: var(--f-background-input-selected);
108
+ input[type="checkbox"]:checked + #{$CHECKBOX_SELECTOR}__label::after {
109
+ background-color: $checkbox-icon-color-content-disabled;
110
+ }
98
111
  }
99
112
 
100
- input[type="checkbox"]:not(:checked) + #{$CHECKBOX_SELECTOR}__label::before {
101
- box-shadow: var(--f-input-shadow-inset);
113
+ input[type="checkbox"]:checked + label::before {
114
+ background-color: $checkbox-color-background-selected;
115
+ border: var(--f-border-width-medium) solid $checkbox-color-border-selected;
116
+ @media (forced-colors: active) {
117
+ background-color: HighLight;
118
+ border-color: HighLight;
119
+ }
102
120
  }
103
121
 
104
122
  input[type="checkbox"]:checked + #{$CHECKBOX_SELECTOR}__label::after {
package/src/components/checkbox/_variables.scss ADDED
@@ -0,0 +1,16 @@
1
+ // TEXT
2
+ $checkbox-color-text-disabled: var(--fkds-color-text-disabled);
3
+
4
+ // ICON
5
+ $checkbox-icon-color-content: var(--fkds-icon-color-content-inverted);
6
+ $checkbox-icon-color-content-disabled: var(--fkds-icon-color-content-disabled);
7
+
8
+ // BACKGROUND
9
+ $checkbox-color-background-default: var(--fkds-color-background-primary);
10
+ $checkbox-color-background-selected: var(--fkds-color-select-background-primary-default);
11
+ $checkbox-color-background-disabled: var(--fkds-color-background-disabled);
12
+
13
+ // BORDER
14
+ $checkbox-color-border-default: var(--fkds-color-border-primary);
15
+ $checkbox-color-border-selected: transparent;
16
+ $checkbox-color-border-disabled: var(--fkds-color-border-disabled);
package/src/components/dialogue-tree/_dialogue-tree.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @use "variables" as *;
2
+
1
3
  .dialogue-tree {
2
4
  margin: 0 0 var(--f-margin-component-bottom);
3
5
 
@@ -6,11 +8,11 @@
6
8
  padding-left: 0;
7
9
  list-style-type: none;
8
10
  border-radius: 2px;
9
- border: 1px solid var(--f-border-color-dialogue-tree);
11
+ border: 1px solid $dialogue-tree-color-border-default;
10
12
 
11
13
  &-item {
12
- background-color: var(--f-background-dialogue-tree);
13
- border-bottom: 1px solid var(--f-border-color-dialogue-tree);
14
+ background-color: $dialogue-tree-color-background-default;
15
+ border-bottom: 1px solid $dialogue-tree-color-border-default;
14
16
  padding: 0.25em;
15
17
  height: 60px;
16
18
 
@@ -19,7 +21,7 @@
19
21
  }
20
22
 
21
23
  &:hover {
22
- background-color: var(--f-background-dialogue-tree-hover);
24
+ background-color: $dialogue-tree-color-background-hover;
23
25
  }
24
26
 
25
27
  button {
@@ -39,7 +41,7 @@
39
41
  overflow: hidden;
40
42
  font-weight: var(--f-font-weight-medium);
41
43
  font-size: var(--f-font-size-standard);
42
- color: var(--f-text-color-default);
44
+ color: $dialogue-tree-color-text-default;
43
45
  text-align: left;
44
46
  cursor: pointer;
45
47
  }
package/src/components/dialogue-tree/_variables.scss ADDED
@@ -0,0 +1,6 @@
1
+ $dialogue-tree-color-background-default: var(--fkds-color-background-primary);
2
+ $dialogue-tree-color-border-default: var(--fkds-color-border-primary);
3
+ $dialogue-tree-color-text-default: var(--fkds-color-action-text-secondary-default);
4
+ $dialogue-tree-color-background-hover: var(--fkds-color-action-background-secondary-hover);
5
+ $dialogue-tree-color-border-hover: var(--fkds-color-border-primary);
6
+ $dialogue-tree-color-text-hover: var(--fkds-color-action-text-secondary-default);
package/src/components/file-item/_file-item.scss CHANGED
@@ -42,10 +42,6 @@ $FILE_LIST_ITEM_SELECTOR: ".file-item-list" !default;
42
42
 
43
43
  &__file-remove {
44
44
  flex: 0 0 auto;
45
-
46
- svg {
47
- color: var(--f-icon-color-primary);
48
- }
49
45
  }
50
46
 
51
47
  &__file-abort {
@@ -71,11 +67,4 @@ $FILE_LIST_ITEM_SELECTOR: ".file-item-list" !default;
71
67
  margin-bottom: size.$margin-125;
72
68
  border: var(--f-border-width-medium) solid var(--f-border-color-separator);
73
69
  }
74
-
75
- &__file-uploading {
76
- .progress__meter--inprogress {
77
- background: var(--f-background-progress-file-item-ongoing);
78
- border: var(--f-border-width-small) solid var(--f-border-color-progress-file-item-ongoing);
79
- }
80
- }
81
70
  }
package/src/components/progressbar/_progressbar.scss CHANGED
@@ -1,34 +1,44 @@
1
1
  @use "../../core/size";
2
+ @use "variables" as *;
2
3
 
3
4
  $PROGRESS_BAR_SELECTOR: ".progress" !default;
5
+ $progressbar-height: var(--f-height-small);
6
+ $progressbar-border-width: var(--f-border-width-medium);
4
7
 
5
8
  #{$PROGRESS_BAR_SELECTOR} {
6
- background-color: var(--f-background-progress);
7
- border-radius: var(--f-height-medium);
8
- box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.1);
9
- height: var(--f-height-small);
9
+ background-color: $progressbar-color-background;
10
+ border-radius: var(--f-border-radius-medium);
11
+ height: $progressbar-height;
10
12
  margin-bottom: size.$margin-150;
11
13
  padding: 0;
14
+ border: $progressbar-border-width solid $progressbar-color-border;
15
+
16
+ @media (forced-colors: active) {
17
+ border: $progressbar-border-width solid highlight;
18
+ }
12
19
 
13
20
  &__meter {
14
- border-radius: var(--f-height-medium);
15
21
  display: block;
16
22
  float: left;
17
- height: var(--f-height-small);
18
- margin: calc(-1 * var(--f-border-width-small));
23
+ height: calc($progressbar-height - ($progressbar-border-width * 2));
19
24
  transition:
20
25
  width var(--f-animation-duration-medium) ease-out,
21
26
  background-color var(--f-animation-duration-medium) ease-out;
22
27
 
23
28
  &--inprogress {
24
- background: var(--f-background-progress-ongoing);
25
- border: var(--f-border-width-small) solid var(--f-border-color-progress-ongoing);
29
+ background: $progressbar-color-meter-inprogress;
30
+
31
+ @media (forced-colors: active) {
32
+ background: highlight;
33
+ }
26
34
  }
27
35
 
28
36
  &--finished {
29
- background: var(--f-background-progress-finished);
30
- border: var(--f-border-width-small) solid var(--f-border-color-progress-finished);
31
- width: calc(100% + 2 * var(--f-border-width-small));
37
+ background: $progressbar-color-meter-finished;
38
+
39
+ @media (forced-colors: active) {
40
+ background: highlight;
41
+ }
32
42
  }
33
43
  }
34
44
  }
package/src/components/progressbar/_variables.scss ADDED
@@ -0,0 +1,4 @@
1
+ $progressbar-color-background: var(--fkds-color-background-primary);
2
+ $progressbar-color-meter-inprogress: var(--fkds-color-feedback-background-positive-strong);
3
+ $progressbar-color-meter-finished: var(--fkds-color-feedback-background-positive-strong);
4
+ $progressbar-color-border: var(--fkds-color-feedback-border-positive);
package/src/components/radio-button/_radio-button.scss CHANGED
@@ -2,6 +2,8 @@
2
2
  @use "../../core/size";
3
3
  @use "../../core/mixins/focus" as *;
4
4
  @use "../../core/mixins/sr-only" as *;
5
+ @use "../../core/utils/functions" as *;
6
+ @use "variables" as *;
5
7
 
6
8
  $radio_button_label_offset: 0.1rem;
7
9
  $RADIO_BUTTON_SELECTOR: ".radio-button" !default;
@@ -52,7 +54,8 @@ $RADIO_BUTTON_SELECTOR: ".radio-button" !default;
52
54
  top: 0;
53
55
  cursor: pointer;
54
56
  width: var(--f-icon-size-medium);
55
- border: var(--f-border-width-medium) solid var(--f-border-color-input);
57
+ background-color: $radio-button-color-background-default;
58
+ border: var(--f-border-width-medium) solid $radio-button-color-border-default;
56
59
  display: block;
57
60
  transition:
58
61
  background-color ease var(--f-animation-duration-medium),
@@ -60,43 +63,47 @@ $RADIO_BUTTON_SELECTOR: ".radio-button" !default;
60
63
  opacity ease var(--f-animation-duration-medium);
61
64
  }
62
65
 
63
- // Outer ring of the custom radio input
64
- &::before {
65
- background: var(--f-background-input);
66
- box-shadow: inset 0 0 0 var(--f-border-width-medium) var(--f-border-color-input-inner);
67
- }
68
-
69
- // Inner ring of the custom radio input
66
+ // Inner and outer ring of the custom radio input
70
67
  &::after {
71
- background: var(--f-background-input-selected);
72
- box-shadow: inset 0 0 0 var(--f-border-width-medium) var(--f-border-color-input-inner-selected);
68
+ background-color: $radio-button-color-background-selected;
69
+ box-shadow: inset 0 0 0 var(--f-border-width-medium) $radio-button-color-background-default;
73
70
  opacity: 0;
71
+ @media (forced-colors: active) {
72
+ forced-color-adjust: none;
73
+ background-color: Highlight;
74
+ box-shadow: inset 0 0 0 var(--f-border-width-medium) Canvas;
75
+ }
74
76
  }
75
77
  }
76
78
 
77
79
  &.disabled {
78
- color: var(--f-text-color-input-disabled);
80
+ color: $radio-button-color-text-disabled;
81
+ @media (forced-colors: active) {
82
+ color: GrayText;
83
+ }
79
84
 
80
85
  #{$RADIO_BUTTON_SELECTOR}__label {
86
+ cursor: default;
81
87
  &::before,
82
88
  &::after {
83
- border: var(--f-border-width-medium) solid var(--f-text-color-input-disabled);
84
- box-shadow: inset 0 0 0 var(--f-border-width-medium) var(--f-border-color-input-inner-disabled);
85
- }
86
-
87
- &::after {
88
- background: var(--f-background-input-selected-disabled);
89
+ background: $radio-button-color-background-disabled;
90
+ border: var(--f-border-width-medium) solid $radio-button-color-border-disabled;
91
+ cursor: default;
92
+ @media (forced-colors: active) {
93
+ border: var(--f-border-width-medium) solid GrayText;
94
+ }
89
95
  }
90
96
  }
91
97
  }
92
98
 
93
- // Hide inner ring by default
99
+ // Hide inner and outer ring by default
94
100
  input[type="radio"] + label::after {
95
101
  opacity: 0;
96
102
  }
97
103
 
98
- // Show inner ring when checked
104
+ // Show inner and outer ring and change color on outer ring when checked
99
105
  input[type="radio"]:checked + label::after {
106
+ border: var(--f-border-width-medium) solid $radio-button-color-border-selected;
100
107
  opacity: 1;
101
108
  }
102
109
 
package/src/components/radio-button/_variables.scss ADDED
@@ -0,0 +1,12 @@
1
+ // TEXT
2
+ $radio-button-color-text-disabled: var(--fkds-color-text-disabled);
3
+
4
+ // BACKGROUND
5
+ $radio-button-color-background-default: var(--fkds-color-background-primary);
6
+ $radio-button-color-background-selected: var(--fkds-color-select-background-primary-default);
7
+ $radio-button-color-background-disabled: var(--fkds-color-background-disabled);
8
+
9
+ // BORDER
10
+ $radio-button-color-border-default: var(--fkds-color-border-primary);
11
+ $radio-button-color-border-selected: transparent;
12
+ $radio-button-color-border-disabled: var(--fkds-color-border-disabled);