@fkui/design 5.41.0 → 5.42.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-exp.css +24 -24
- package/lib/fkui-exp.min.css +1 -1
- package/lib/fkui-int.css +24 -24
- package/lib/fkui-int.min.css +1 -1
- package/package.json +6 -6
- package/src/components/button/_button.scss +6 -12
- package/src/components/chip/_chip.scss +13 -12
- package/src/components/chip/_variables.scss +17 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fkui/design",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.42.0",
|
|
4
4
|
"description": "fkui design",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"fkui",
|
|
@@ -35,8 +35,8 @@
|
|
|
35
35
|
"runner": "jest-light-runner"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
|
-
"@fkui/css-variables": "5.
|
|
39
|
-
"@fkui/icon-lib-default": "5.
|
|
38
|
+
"@fkui/css-variables": "5.42.0",
|
|
39
|
+
"@fkui/icon-lib-default": "5.42.0",
|
|
40
40
|
"autoprefixer": "10.4.20",
|
|
41
41
|
"cssnano": "7.0.6",
|
|
42
42
|
"flush-promises": "1.0.2",
|
|
@@ -46,12 +46,12 @@
|
|
|
46
46
|
"picocolors": "1.1.1",
|
|
47
47
|
"postcss": "8.4.49",
|
|
48
48
|
"postcss-url": "10.1.3",
|
|
49
|
-
"postcss-var-func-fallback": "3.0.
|
|
49
|
+
"postcss-var-func-fallback": "3.0.1",
|
|
50
50
|
"svgo": "3.3.2"
|
|
51
51
|
},
|
|
52
52
|
"peerDependencies": {
|
|
53
53
|
"@fkui/css-variables": "^5.36.0",
|
|
54
|
-
"sass": "^1.40",
|
|
54
|
+
"sass": "^1.40.0",
|
|
55
55
|
"stylelint": ">= 14"
|
|
56
56
|
},
|
|
57
57
|
"peerDependenciesMeta": {
|
|
@@ -66,5 +66,5 @@
|
|
|
66
66
|
"node": ">= 20",
|
|
67
67
|
"npm": ">= 7"
|
|
68
68
|
},
|
|
69
|
-
"gitHead": "
|
|
69
|
+
"gitHead": "3cfa52273826f2e8eb802e2c769679e4269b13d8"
|
|
70
70
|
}
|
|
@@ -93,8 +93,7 @@ $button--primary: (
|
|
|
93
93
|
/* stylelint-disable declaration-block-no-redundant-longhand-properties -- readability */ padding-top: densify(var(--f-button-primary-padding-top)),
|
|
94
94
|
padding-right: var(--f-button-primary-padding-right),
|
|
95
95
|
padding-bottom: densify(var(--f-button-primary-padding-bottom)),
|
|
96
|
-
padding-left: var(--f-button-primary-padding-left)
|
|
97
|
-
/* stylelint-enable declaration-block-no-redundant-longhand-properties */
|
|
96
|
+
padding-left: var(--f-button-primary-padding-left) /* stylelint-enable declaration-block-no-redundant-longhand-properties */,
|
|
98
97
|
) !default;
|
|
99
98
|
|
|
100
99
|
/// Secondary button
|
|
@@ -108,8 +107,7 @@ $button--secondary: (
|
|
|
108
107
|
/* stylelint-disable declaration-block-no-redundant-longhand-properties -- readability */ padding-top: densify(var(--f-button-secondary-padding-top)),
|
|
109
108
|
padding-right: var(--f-button-secondary-padding-right),
|
|
110
109
|
padding-bottom: densify(var(--f-button-secondary-padding-bottom)),
|
|
111
|
-
padding-left: var(--f-button-secondary-padding-left)
|
|
112
|
-
/* stylelint-enable declaration-block-no-redundant-longhand-properties */
|
|
110
|
+
padding-left: var(--f-button-secondary-padding-left) /* stylelint-enable declaration-block-no-redundant-longhand-properties */,
|
|
113
111
|
) !default;
|
|
114
112
|
|
|
115
113
|
/// Standard button
|
|
@@ -123,8 +121,7 @@ $button--standard: (
|
|
|
123
121
|
/* stylelint-disable declaration-block-no-redundant-longhand-properties -- readability */ padding-top: densify(var(--f-button-standard-padding-top)),
|
|
124
122
|
padding-right: var(--f-button-standard-padding-right),
|
|
125
123
|
padding-bottom: densify(var(--f-button-standard-padding-bottom)),
|
|
126
|
-
padding-left: var(--f-button-standard-padding-left)
|
|
127
|
-
/* stylelint-enable declaration-block-no-redundant-longhand-properties */
|
|
124
|
+
padding-left: var(--f-button-standard-padding-left) /* stylelint-enable declaration-block-no-redundant-longhand-properties */,
|
|
128
125
|
) !default;
|
|
129
126
|
|
|
130
127
|
/// Discrete button
|
|
@@ -142,8 +139,7 @@ $button--discrete: (
|
|
|
142
139
|
/* stylelint-disable declaration-block-no-redundant-longhand-properties -- readability */ padding-top: densify(var(--f-button-discrete-padding-top)),
|
|
143
140
|
padding-right: var(--f-button-discrete-padding-right),
|
|
144
141
|
padding-bottom: densify(var(--f-button-discrete-padding-bottom)),
|
|
145
|
-
padding-left: var(--f-button-discrete-padding-left)
|
|
146
|
-
/* stylelint-enable declaration-block-no-redundant-longhand-properties */
|
|
142
|
+
padding-left: var(--f-button-discrete-padding-left) /* stylelint-enable declaration-block-no-redundant-longhand-properties */,
|
|
147
143
|
) !default;
|
|
148
144
|
|
|
149
145
|
/// Discrete inverted button
|
|
@@ -160,8 +156,7 @@ $button--discrete-inverted: (
|
|
|
160
156
|
/* stylelint-disable declaration-block-no-redundant-longhand-properties -- readability */ padding-top: densify(var(--f-button-discrete-padding-top)),
|
|
161
157
|
padding-right: var(--f-button-discrete-padding-right),
|
|
162
158
|
padding-bottom: densify(var(--f-button-discrete-padding-bottom)),
|
|
163
|
-
padding-left: var(--f-button-discrete-padding-left)
|
|
164
|
-
/* stylelint-enable declaration-block-no-redundant-longhand-properties */
|
|
159
|
+
padding-left: var(--f-button-discrete-padding-left) /* stylelint-enable declaration-block-no-redundant-longhand-properties */,
|
|
165
160
|
) !default;
|
|
166
161
|
|
|
167
162
|
/// Tertiary button
|
|
@@ -179,8 +174,7 @@ $button--tertiary: (
|
|
|
179
174
|
/* stylelint-disable declaration-block-no-redundant-longhand-properties -- readability */ padding-top: densify(var(--f-button-tertiary-padding-top)),
|
|
180
175
|
padding-right: var(--f-button-tertiary-padding-right),
|
|
181
176
|
padding-bottom: densify(var(--f-button-tertiary-padding-bottom)),
|
|
182
|
-
padding-left: var(--f-button-tertiary-padding-left)
|
|
183
|
-
/* stylelint-enable declaration-block-no-redundant-longhand-properties */
|
|
177
|
+
padding-left: var(--f-button-tertiary-padding-left) /* stylelint-enable declaration-block-no-redundant-longhand-properties */,
|
|
184
178
|
) !default;
|
|
185
179
|
|
|
186
180
|
/// Button placeholders
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
@use "../../core/size";
|
|
2
2
|
@use "../../core/mixins/breakpoints" as bp;
|
|
3
|
+
@use "variables" as *;
|
|
3
4
|
|
|
4
5
|
$chip-border-radius: 20px;
|
|
5
6
|
|
|
@@ -19,9 +20,9 @@ $chip-border-radius: 20px;
|
|
|
19
20
|
|
|
20
21
|
&.disabled {
|
|
21
22
|
.#{$item}__label {
|
|
22
|
-
background:
|
|
23
|
-
border-color:
|
|
24
|
-
color:
|
|
23
|
+
background: $chip-color-background-disabled;
|
|
24
|
+
border-color: $chip-color-border-disabled;
|
|
25
|
+
color: $chip-color-text-disabled;
|
|
25
26
|
cursor: not-allowed;
|
|
26
27
|
}
|
|
27
28
|
}
|
|
@@ -34,9 +35,9 @@ $chip-border-radius: 20px;
|
|
|
34
35
|
font-weight: var(--f-font-weight-medium);
|
|
35
36
|
padding: size.$padding-050 size.$padding-100;
|
|
36
37
|
border-radius: $chip-border-radius;
|
|
37
|
-
border: var(--f-border-width-medium) solid
|
|
38
|
-
background-color:
|
|
39
|
-
color:
|
|
38
|
+
border: var(--f-border-width-medium) solid $chip-color-border-default;
|
|
39
|
+
background-color: $chip-color-background-default;
|
|
40
|
+
color: $chip-color-text-default;
|
|
40
41
|
justify-content: center;
|
|
41
42
|
max-width: 400px;
|
|
42
43
|
user-select: none;
|
|
@@ -52,15 +53,15 @@ $chip-border-radius: 20px;
|
|
|
52
53
|
}
|
|
53
54
|
|
|
54
55
|
.#{$item}__label:hover {
|
|
55
|
-
border-color:
|
|
56
|
-
background-color:
|
|
57
|
-
color:
|
|
56
|
+
border-color: $chip-color-border-hover;
|
|
57
|
+
background-color: $chip-color-background-hover;
|
|
58
|
+
color: $chip-color-text-hover;
|
|
58
59
|
}
|
|
59
60
|
|
|
60
61
|
input[type="#{$type}"]:checked + .#{$item}__label {
|
|
61
|
-
background:
|
|
62
|
-
border-color:
|
|
63
|
-
color:
|
|
62
|
+
background: $chip-color-background-selected;
|
|
63
|
+
border-color: $chip-color-border-selected;
|
|
64
|
+
color: $chip-color-text-selected;
|
|
64
65
|
}
|
|
65
66
|
|
|
66
67
|
input[type="#{$type}"]:focus + label.#{$item}__label {
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
// TEXT
|
|
2
|
+
$chip-color-text-default: var(--fkds-color-text-primary);
|
|
3
|
+
$chip-color-text-selected: var(--fkds-color-text-inverted);
|
|
4
|
+
$chip-color-text-disabled: var(--fkds-color-text-disabled);
|
|
5
|
+
$chip-color-text-hover: var(--fkds-color-text-primary);
|
|
6
|
+
|
|
7
|
+
// BACKGROUND
|
|
8
|
+
$chip-color-background-default: var(--fkds-color-background-primary);
|
|
9
|
+
$chip-color-background-selected: var(--fkds-color-action-background-select-default);
|
|
10
|
+
$chip-color-background-disabled: var(--fkds-color-background-disabled);
|
|
11
|
+
$chip-color-background-hover: var(--fkds-color-action-background-select-hover);
|
|
12
|
+
|
|
13
|
+
// BORDER
|
|
14
|
+
$chip-color-border-default: var(--fkds-color-border-primary);
|
|
15
|
+
$chip-color-border-disabled: var(--fkds-color-border-primary);
|
|
16
|
+
$chip-color-border-hover: var(--fkds-color-border-primary);
|
|
17
|
+
$chip-color-border-selected: transparent;
|