@seed-design/css 1.1.0 → 1.1.3
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/all.css +121 -50
- package/all.min.css +1 -1
- package/package.json +1 -1
- package/recipes/action-sheet.css +8 -2
- package/recipes/app-bar.css +8 -1
- package/recipes/bottom-sheet.css +12 -3
- package/recipes/callout.css +1 -0
- package/recipes/dialog.css +8 -2
- package/recipes/extended-action-sheet.css +8 -2
- package/recipes/input-button.css +6 -1
- package/recipes/list-header.css +1 -0
- package/recipes/list-item.css +13 -3
- package/recipes/menu-sheet-item.css +3 -0
- package/recipes/menu-sheet.css +12 -2
- package/recipes/scroll-fog.css +23 -0
- package/recipes/scroll-fog.d.ts +22 -0
- package/recipes/scroll-fog.mjs +28 -0
- package/recipes/text-input.css +73 -35
- package/recipes/text-input.d.ts +4 -0
- package/recipes/text-input.mjs +16 -2
- package/vars/component/index.d.ts +1 -0
- package/vars/component/index.mjs +1 -0
- package/vars/component/scroll-fog.d.ts +11 -0
- package/vars/component/scroll-fog.mjs +11 -0
- package/vars/component/text-input.d.ts +74 -24
- package/vars/component/text-input.mjs +74 -24
package/package.json
CHANGED
package/recipes/action-sheet.css
CHANGED
|
@@ -3,14 +3,20 @@
|
|
|
3
3
|
display: flex;
|
|
4
4
|
justify-content: center;
|
|
5
5
|
align-items: flex-end;
|
|
6
|
-
|
|
6
|
+
top: 0;
|
|
7
|
+
right: 0;
|
|
8
|
+
bottom: 0;
|
|
9
|
+
left: 0;
|
|
7
10
|
overscroll-behavior-y: none;
|
|
8
11
|
--sheet-z-index: 2;
|
|
9
12
|
z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
|
|
10
13
|
}
|
|
11
14
|
.seed-action-sheet__backdrop {
|
|
12
15
|
position: fixed;
|
|
13
|
-
|
|
16
|
+
top: 0;
|
|
17
|
+
right: 0;
|
|
18
|
+
bottom: 0;
|
|
19
|
+
left: 0;
|
|
14
20
|
background: var(--seed-color-bg-overlay);
|
|
15
21
|
z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
|
|
16
22
|
}
|
package/recipes/app-bar.css
CHANGED
|
@@ -11,7 +11,10 @@
|
|
|
11
11
|
content: "";
|
|
12
12
|
position: absolute;
|
|
13
13
|
pointer-events: none;
|
|
14
|
-
|
|
14
|
+
top: 0;
|
|
15
|
+
right: 0;
|
|
16
|
+
bottom: 0;
|
|
17
|
+
left: 0;
|
|
15
18
|
z-index: -1;
|
|
16
19
|
}
|
|
17
20
|
.seed-app-bar__left {
|
|
@@ -29,6 +32,10 @@
|
|
|
29
32
|
display: flex;
|
|
30
33
|
align-items: center;
|
|
31
34
|
justify-content: center;
|
|
35
|
+
border: none;
|
|
36
|
+
background: none;
|
|
37
|
+
font-family: inherit;
|
|
38
|
+
padding: 0;
|
|
32
39
|
}
|
|
33
40
|
.seed-app-bar__icon {
|
|
34
41
|
display: inline-block;
|
package/recipes/bottom-sheet.css
CHANGED
|
@@ -3,14 +3,20 @@
|
|
|
3
3
|
display: flex;
|
|
4
4
|
justify-content: center;
|
|
5
5
|
align-items: flex-end;
|
|
6
|
-
|
|
6
|
+
top: 0;
|
|
7
|
+
right: 0;
|
|
8
|
+
bottom: 0;
|
|
9
|
+
left: 0;
|
|
7
10
|
overscroll-behavior-y: none;
|
|
8
11
|
--sheet-z-index: 2;
|
|
9
12
|
z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
|
|
10
13
|
}
|
|
11
14
|
.seed-bottom-sheet__backdrop {
|
|
12
15
|
position: fixed;
|
|
13
|
-
|
|
16
|
+
top: 0;
|
|
17
|
+
right: 0;
|
|
18
|
+
bottom: 0;
|
|
19
|
+
left: 0;
|
|
14
20
|
background: var(--seed-color-bg-overlay);
|
|
15
21
|
z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
|
|
16
22
|
}
|
|
@@ -150,7 +156,10 @@
|
|
|
150
156
|
.seed-bottom-sheet__closeButton:after {
|
|
151
157
|
content: "";
|
|
152
158
|
position: absolute;
|
|
153
|
-
|
|
159
|
+
top: calc((28px - 44px) / 2);
|
|
160
|
+
right: calc((28px - 44px) / 2);
|
|
161
|
+
bottom: calc((28px - 44px) / 2);
|
|
162
|
+
left: calc((28px - 44px) / 2);
|
|
154
163
|
}
|
|
155
164
|
.seed-bottom-sheet__header--headerAlign_left {
|
|
156
165
|
justify-content: flex-start;
|
package/recipes/callout.css
CHANGED
package/recipes/dialog.css
CHANGED
|
@@ -3,14 +3,20 @@
|
|
|
3
3
|
display: flex;
|
|
4
4
|
justify-content: center;
|
|
5
5
|
align-items: center;
|
|
6
|
-
|
|
6
|
+
top: 0;
|
|
7
|
+
right: 0;
|
|
8
|
+
bottom: 0;
|
|
9
|
+
left: 0;
|
|
7
10
|
overscroll-behavior-y: none;
|
|
8
11
|
--dialog-z-index: 2;
|
|
9
12
|
z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
|
|
10
13
|
}
|
|
11
14
|
.seed-dialog__backdrop {
|
|
12
15
|
position: fixed;
|
|
13
|
-
|
|
16
|
+
top: 0;
|
|
17
|
+
right: 0;
|
|
18
|
+
bottom: 0;
|
|
19
|
+
left: 0;
|
|
14
20
|
background: var(--seed-color-bg-overlay);
|
|
15
21
|
z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
|
|
16
22
|
}
|
|
@@ -3,14 +3,20 @@
|
|
|
3
3
|
display: flex;
|
|
4
4
|
justify-content: center;
|
|
5
5
|
align-items: flex-end;
|
|
6
|
-
|
|
6
|
+
top: 0;
|
|
7
|
+
right: 0;
|
|
8
|
+
bottom: 0;
|
|
9
|
+
left: 0;
|
|
7
10
|
overscroll-behavior-y: none;
|
|
8
11
|
--sheet-z-index: 2;
|
|
9
12
|
z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
|
|
10
13
|
}
|
|
11
14
|
.seed-extended-action-sheet__backdrop {
|
|
12
15
|
position: fixed;
|
|
13
|
-
|
|
16
|
+
top: 0;
|
|
17
|
+
right: 0;
|
|
18
|
+
bottom: 0;
|
|
19
|
+
left: 0;
|
|
14
20
|
background: var(--seed-color-bg-overlay);
|
|
15
21
|
z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
|
|
16
22
|
}
|
package/recipes/input-button.css
CHANGED
|
@@ -12,9 +12,13 @@
|
|
|
12
12
|
.seed-input-button__button {
|
|
13
13
|
position: absolute;
|
|
14
14
|
z-index: -1;
|
|
15
|
-
|
|
15
|
+
top: 0;
|
|
16
|
+
right: 0;
|
|
17
|
+
bottom: 0;
|
|
18
|
+
left: 0;
|
|
16
19
|
cursor: pointer;
|
|
17
20
|
border: none;
|
|
21
|
+
padding: 0;
|
|
18
22
|
border-radius: var(--seed-radius-r3);
|
|
19
23
|
background-color: transparent;
|
|
20
24
|
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
|
|
@@ -93,6 +97,7 @@
|
|
|
93
97
|
cursor: pointer;
|
|
94
98
|
border: none;
|
|
95
99
|
background-color: transparent;
|
|
100
|
+
padding: 0;
|
|
96
101
|
--seed-icon-size: 22px;
|
|
97
102
|
--seed-icon-color: var(--seed-color-fg-neutral-subtle);
|
|
98
103
|
}
|
package/recipes/list-header.css
CHANGED
package/recipes/list-item.css
CHANGED
|
@@ -53,20 +53,30 @@
|
|
|
53
53
|
flex-direction: column;
|
|
54
54
|
align-items: flex-start;
|
|
55
55
|
flex-grow: 1;
|
|
56
|
+
border: none;
|
|
57
|
+
background: none;
|
|
58
|
+
font-family: inherit;
|
|
56
59
|
--seed-box-gap: var(--seed-dimension-x0_5);
|
|
57
60
|
gap: var(--seed-box-gap);
|
|
58
61
|
--seed-box-padding-right: var(--seed-dimension-x2_5);
|
|
59
|
-
padding
|
|
62
|
+
padding: 0 var(--seed-box-padding-right) 0 0;
|
|
63
|
+
text-decoration: none;
|
|
60
64
|
}
|
|
61
65
|
.seed-list-item__content:after {
|
|
62
66
|
content: '';
|
|
63
67
|
position: absolute;
|
|
64
|
-
|
|
68
|
+
top: 0;
|
|
69
|
+
right: 0;
|
|
70
|
+
bottom: 0;
|
|
71
|
+
left: 0;
|
|
65
72
|
}
|
|
66
73
|
.seed-list-item__content:before {
|
|
67
74
|
content: '';
|
|
68
75
|
position: absolute;
|
|
69
|
-
|
|
76
|
+
top: 0;
|
|
77
|
+
right: 0;
|
|
78
|
+
bottom: 0;
|
|
79
|
+
left: 0;
|
|
70
80
|
z-index: -1;
|
|
71
81
|
transition-property: background-color;
|
|
72
82
|
transition-duration: var(--seed-duration-d3);
|
|
@@ -10,6 +10,9 @@
|
|
|
10
10
|
font-size: var(--seed-font-size-t5);
|
|
11
11
|
line-height: var(--seed-line-height-t5);
|
|
12
12
|
font-weight: var(--seed-font-weight-regular);
|
|
13
|
+
border: none;
|
|
14
|
+
font-family: inherit;
|
|
15
|
+
outline: none;
|
|
13
16
|
}
|
|
14
17
|
.seed-menu-sheet-item:is(:active, [data-active]) {
|
|
15
18
|
background-color: var(--seed-color-bg-neutral-weak-pressed);
|
package/recipes/menu-sheet.css
CHANGED
|
@@ -3,14 +3,20 @@
|
|
|
3
3
|
display: flex;
|
|
4
4
|
justify-content: center;
|
|
5
5
|
align-items: flex-end;
|
|
6
|
-
|
|
6
|
+
top: 0;
|
|
7
|
+
right: 0;
|
|
8
|
+
bottom: 0;
|
|
9
|
+
left: 0;
|
|
7
10
|
overscroll-behavior-y: none;
|
|
8
11
|
--sheet-z-index: 2;
|
|
9
12
|
z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
|
|
10
13
|
}
|
|
11
14
|
.seed-menu-sheet__backdrop {
|
|
12
15
|
position: fixed;
|
|
13
|
-
|
|
16
|
+
top: 0;
|
|
17
|
+
right: 0;
|
|
18
|
+
bottom: 0;
|
|
19
|
+
left: 0;
|
|
14
20
|
background: var(--seed-color-bg-overlay);
|
|
15
21
|
z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
|
|
16
22
|
}
|
|
@@ -78,6 +84,7 @@
|
|
|
78
84
|
font-size: var(--seed-font-size-t6);
|
|
79
85
|
line-height: var(--seed-line-height-t6);
|
|
80
86
|
font-weight: var(--seed-font-weight-bold);
|
|
87
|
+
margin: 0;
|
|
81
88
|
}
|
|
82
89
|
.seed-menu-sheet__list {
|
|
83
90
|
display: flex;
|
|
@@ -107,6 +114,9 @@
|
|
|
107
114
|
padding-inline: var(--seed-dimension-x5);
|
|
108
115
|
padding-block: var(--seed-dimension-x3_5);
|
|
109
116
|
border-radius: var(--seed-radius-r3);
|
|
117
|
+
border: none;
|
|
118
|
+
font-family: inherit;
|
|
119
|
+
outline: none;
|
|
110
120
|
color: var(--seed-color-fg-neutral);
|
|
111
121
|
font-size: var(--seed-font-size-t5);
|
|
112
122
|
line-height: var(--seed-line-height-t5);
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
.seed-scroll-fog {
|
|
2
|
+
position: relative;
|
|
3
|
+
overflow: auto;
|
|
4
|
+
height: 100%;
|
|
5
|
+
width: 100%;
|
|
6
|
+
--scroll-fog-from-color: #00000000;
|
|
7
|
+
--scroll-fog-to-color: #000000ff;
|
|
8
|
+
mask-image: linear-gradient(to bottom, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-top) * var(--scroll-fog-size-top))), linear-gradient(to top, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom))), linear-gradient(to right, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-left) * var(--scroll-fog-size-left))), linear-gradient(to left, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-right) * var(--scroll-fog-size-right)));
|
|
9
|
+
-webkit-mask-image: linear-gradient(to bottom, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-top) * var(--scroll-fog-size-top))), linear-gradient(to top, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom))), linear-gradient(to right, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-left) * var(--scroll-fog-size-left))), linear-gradient(to left, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-right) * var(--scroll-fog-size-right)));
|
|
10
|
+
mask-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
|
|
11
|
+
-webkit-mask-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
|
|
12
|
+
mask-repeat: no-repeat;
|
|
13
|
+
-webkit-mask-repeat: no-repeat;
|
|
14
|
+
mask-composite: intersect;
|
|
15
|
+
-webkit-mask-composite: source-in;
|
|
16
|
+
}
|
|
17
|
+
.seed-scroll-fog--hideScrollBar_true {
|
|
18
|
+
scrollbar-width: none;
|
|
19
|
+
-ms-overflow-style: none;
|
|
20
|
+
}
|
|
21
|
+
.seed-scroll-fog--hideScrollBar_true::-webkit-scrollbar {
|
|
22
|
+
display: none;
|
|
23
|
+
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
declare interface ScrollFogVariant {
|
|
2
|
+
/**
|
|
3
|
+
* @default false
|
|
4
|
+
*/
|
|
5
|
+
hideScrollBar: boolean;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
declare type ScrollFogVariantMap = {
|
|
9
|
+
[key in keyof ScrollFogVariant]: Array<ScrollFogVariant[key]>;
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
export declare type ScrollFogVariantProps = Partial<ScrollFogVariant>;
|
|
13
|
+
|
|
14
|
+
export declare const scrollFogVariantMap: ScrollFogVariantMap;
|
|
15
|
+
|
|
16
|
+
export declare const scrollFog: ((
|
|
17
|
+
props?: ScrollFogVariantProps,
|
|
18
|
+
) => string) & {
|
|
19
|
+
splitVariantProps: <T extends ScrollFogVariantProps>(
|
|
20
|
+
props: T,
|
|
21
|
+
) => [ScrollFogVariantProps, Omit<T, keyof ScrollFogVariantProps>];
|
|
22
|
+
}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import './scroll-fog.css';
|
|
2
|
+
import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
|
|
3
|
+
|
|
4
|
+
const defaultVariant = {
|
|
5
|
+
"hideScrollBar": false
|
|
6
|
+
};
|
|
7
|
+
|
|
8
|
+
const compoundVariants = [];
|
|
9
|
+
|
|
10
|
+
export const scrollFogVariantMap = {
|
|
11
|
+
"hideScrollBar": [
|
|
12
|
+
true
|
|
13
|
+
]
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
export const scrollFogVariantKeys = Object.keys(scrollFogVariantMap);
|
|
17
|
+
|
|
18
|
+
export function scrollFog(props) {
|
|
19
|
+
return createClassName(
|
|
20
|
+
"seed-scroll-fog",
|
|
21
|
+
mergeVariants(defaultVariant, props),
|
|
22
|
+
compoundVariants,
|
|
23
|
+
);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
Object.assign(scrollFog, { splitVariantProps: (props) => splitVariantProps(props, scrollFogVariantMap) });
|
|
27
|
+
|
|
28
|
+
// @recipe(seed): scroll-fog
|
package/recipes/text-input.css
CHANGED
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
width: 100%;
|
|
4
4
|
align-items: center;
|
|
5
5
|
overflow: hidden;
|
|
6
|
-
gap: var(--seed-dimension-x2_5);
|
|
7
6
|
transition: box-shadow var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
8
7
|
}
|
|
9
8
|
.seed-text-input__value {
|
|
@@ -22,10 +21,6 @@
|
|
|
22
21
|
.seed-text-input__value:is(input) {
|
|
23
22
|
width: 0;
|
|
24
23
|
}
|
|
25
|
-
.seed-text-input__value:is(textarea) {
|
|
26
|
-
min-height: 95px;
|
|
27
|
-
padding-block: var(--seed-dimension-x3_5);
|
|
28
|
-
}
|
|
29
24
|
.seed-text-input__value::placeholder {
|
|
30
25
|
color: var(--seed-color-fg-placeholder);
|
|
31
26
|
font-weight: var(--seed-font-weight-regular);
|
|
@@ -36,12 +31,6 @@
|
|
|
36
31
|
.seed-text-input__value:is(:disabled, [disabled], [data-disabled])::placeholder {
|
|
37
32
|
color: var(--seed-color-fg-disabled);
|
|
38
33
|
}
|
|
39
|
-
.seed-text-input__value:is([data-readonly]) {
|
|
40
|
-
color: var(--seed-color-fg-neutral-muted);
|
|
41
|
-
}
|
|
42
|
-
.seed-text-input__value:is([data-readonly])::placeholder {
|
|
43
|
-
color: var(--seed-color-fg-neutral-muted);
|
|
44
|
-
}
|
|
45
34
|
.seed-text-input__prefixText {
|
|
46
35
|
color: var(--seed-color-fg-neutral-muted);
|
|
47
36
|
font-weight: var(--seed-font-weight-regular);
|
|
@@ -59,7 +48,6 @@
|
|
|
59
48
|
flex-shrink: 0;
|
|
60
49
|
}
|
|
61
50
|
.seed-text-input__root--variant_outline {
|
|
62
|
-
min-height: var(--seed-dimension-x13);
|
|
63
51
|
border-radius: var(--seed-radius-r3);
|
|
64
52
|
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
|
|
65
53
|
}
|
|
@@ -75,9 +63,8 @@
|
|
|
75
63
|
.seed-text-input__root--variant_outline:is(:disabled, [disabled], [data-disabled]) {
|
|
76
64
|
background-color: var(--seed-color-bg-disabled);
|
|
77
65
|
}
|
|
78
|
-
.seed-text-
|
|
79
|
-
|
|
80
|
-
line-height: var(--seed-line-height-t5);
|
|
66
|
+
.seed-text-input__root--variant_outline:is([data-readonly]):not(:is(:disabled, [disabled], [data-disabled])) {
|
|
67
|
+
background-color: var(--seed-color-bg-disabled);
|
|
81
68
|
}
|
|
82
69
|
.seed-text-input__value--variant_outline:first-child {
|
|
83
70
|
padding-inline-start: var(--seed-dimension-x4);
|
|
@@ -85,39 +72,20 @@
|
|
|
85
72
|
.seed-text-input__value--variant_outline:last-child {
|
|
86
73
|
padding-inline-end: var(--seed-dimension-x4);
|
|
87
74
|
}
|
|
88
|
-
.seed-text-input__value--variant_outline::placeholder {
|
|
89
|
-
font-size: var(--seed-font-size-t5);
|
|
90
|
-
line-height: var(--seed-line-height-t5);
|
|
91
|
-
}
|
|
92
|
-
.seed-text-input__prefixText--variant_outline {
|
|
93
|
-
font-size: var(--seed-font-size-t5);
|
|
94
|
-
line-height: var(--seed-line-height-t5);
|
|
95
|
-
}
|
|
96
75
|
.seed-text-input__prefixText--variant_outline:first-child {
|
|
97
76
|
margin-inline-start: var(--seed-dimension-x4);
|
|
98
77
|
}
|
|
99
|
-
.seed-text-input__prefixIcon--variant_outline {
|
|
100
|
-
width: var(--seed-dimension-x5);
|
|
101
|
-
height: var(--seed-dimension-x5);
|
|
102
|
-
}
|
|
103
78
|
.seed-text-input__prefixIcon--variant_outline:first-child {
|
|
104
79
|
margin-inline-start: var(--seed-dimension-x4);
|
|
105
80
|
}
|
|
106
|
-
.seed-text-input__suffixText--variant_outline {
|
|
107
|
-
font-size: var(--seed-font-size-t5);
|
|
108
|
-
line-height: var(--seed-line-height-t5);
|
|
109
|
-
}
|
|
110
81
|
.seed-text-input__suffixText--variant_outline:last-child {
|
|
111
82
|
margin-inline-end: var(--seed-dimension-x4);
|
|
112
83
|
}
|
|
113
|
-
.seed-text-input__suffixIcon--variant_outline {
|
|
114
|
-
width: var(--seed-dimension-x5);
|
|
115
|
-
height: var(--seed-dimension-x5);
|
|
116
|
-
}
|
|
117
84
|
.seed-text-input__suffixIcon--variant_outline:last-child {
|
|
118
85
|
margin-inline-end: var(--seed-dimension-x4);
|
|
119
86
|
}
|
|
120
87
|
.seed-text-input__root--variant_underline {
|
|
88
|
+
gap: var(--seed-dimension-x2_5);
|
|
121
89
|
min-height: var(--seed-dimension-x10);
|
|
122
90
|
box-shadow: inset 0 calc(1px * -1) 0 0 var(--seed-color-stroke-neutral-weak);
|
|
123
91
|
}
|
|
@@ -138,6 +106,12 @@
|
|
|
138
106
|
font-size: var(--seed-font-size-t6);
|
|
139
107
|
line-height: var(--seed-line-height-t6);
|
|
140
108
|
}
|
|
109
|
+
.seed-text-input__value--variant_underline:is([data-readonly]):not(:is(:disabled, [disabled], [data-disabled])) {
|
|
110
|
+
color: var(--seed-color-fg-neutral-muted);
|
|
111
|
+
}
|
|
112
|
+
.seed-text-input__value--variant_underline:is([data-readonly]):not(:is(:disabled, [disabled], [data-disabled]))::placeholder {
|
|
113
|
+
color: var(--seed-color-fg-neutral-muted);
|
|
114
|
+
}
|
|
141
115
|
.seed-text-input__prefixText--variant_underline {
|
|
142
116
|
font-size: var(--seed-font-size-t6);
|
|
143
117
|
line-height: var(--seed-line-height-t6);
|
|
@@ -153,4 +127,68 @@
|
|
|
153
127
|
.seed-text-input__suffixIcon--variant_underline {
|
|
154
128
|
width: var(--seed-dimension-x6);
|
|
155
129
|
height: var(--seed-dimension-x6);
|
|
130
|
+
}
|
|
131
|
+
.seed-text-input__value--size_large:is(textarea) {
|
|
132
|
+
min-height: 95px;
|
|
133
|
+
padding-block: var(--seed-dimension-x3_5);
|
|
134
|
+
}
|
|
135
|
+
.seed-text-input__value--size_medium:is(textarea) {
|
|
136
|
+
min-height: 90px;
|
|
137
|
+
padding-block: 11px;
|
|
138
|
+
}
|
|
139
|
+
.seed-text-input__root--variant_outline-size_large {
|
|
140
|
+
gap: var(--seed-dimension-x2_5);
|
|
141
|
+
min-height: var(--seed-dimension-x13);
|
|
142
|
+
}
|
|
143
|
+
.seed-text-input__value--variant_outline-size_large {
|
|
144
|
+
font-size: var(--seed-font-size-t5);
|
|
145
|
+
line-height: var(--seed-line-height-t5);
|
|
146
|
+
}
|
|
147
|
+
.seed-text-input__value--variant_outline-size_large::placeholder {
|
|
148
|
+
font-size: var(--seed-font-size-t5);
|
|
149
|
+
line-height: var(--seed-line-height-t5);
|
|
150
|
+
}
|
|
151
|
+
.seed-text-input__prefixText--variant_outline-size_large {
|
|
152
|
+
font-size: var(--seed-font-size-t5);
|
|
153
|
+
line-height: var(--seed-line-height-t5);
|
|
154
|
+
}
|
|
155
|
+
.seed-text-input__prefixIcon--variant_outline-size_large {
|
|
156
|
+
width: var(--seed-dimension-x5);
|
|
157
|
+
height: var(--seed-dimension-x5);
|
|
158
|
+
}
|
|
159
|
+
.seed-text-input__suffixText--variant_outline-size_large {
|
|
160
|
+
font-size: var(--seed-font-size-t5);
|
|
161
|
+
line-height: var(--seed-line-height-t5);
|
|
162
|
+
}
|
|
163
|
+
.seed-text-input__suffixIcon--variant_outline-size_large {
|
|
164
|
+
width: var(--seed-dimension-x5);
|
|
165
|
+
height: var(--seed-dimension-x5);
|
|
166
|
+
}
|
|
167
|
+
.seed-text-input__root--variant_outline-size_medium {
|
|
168
|
+
gap: var(--seed-dimension-x1_5);
|
|
169
|
+
min-height: var(--seed-dimension-x10);
|
|
170
|
+
}
|
|
171
|
+
.seed-text-input__value--variant_outline-size_medium {
|
|
172
|
+
font-size: var(--seed-font-size-t4);
|
|
173
|
+
line-height: var(--seed-line-height-t4);
|
|
174
|
+
}
|
|
175
|
+
.seed-text-input__value--variant_outline-size_medium::placeholder {
|
|
176
|
+
font-size: var(--seed-font-size-t4);
|
|
177
|
+
line-height: var(--seed-line-height-t4);
|
|
178
|
+
}
|
|
179
|
+
.seed-text-input__prefixText--variant_outline-size_medium {
|
|
180
|
+
font-size: var(--seed-font-size-t4);
|
|
181
|
+
line-height: var(--seed-line-height-t4);
|
|
182
|
+
}
|
|
183
|
+
.seed-text-input__prefixIcon--variant_outline-size_medium {
|
|
184
|
+
width: var(--seed-dimension-x4);
|
|
185
|
+
height: var(--seed-dimension-x4);
|
|
186
|
+
}
|
|
187
|
+
.seed-text-input__suffixText--variant_outline-size_medium {
|
|
188
|
+
font-size: var(--seed-font-size-t4);
|
|
189
|
+
line-height: var(--seed-line-height-t4);
|
|
190
|
+
}
|
|
191
|
+
.seed-text-input__suffixIcon--variant_outline-size_medium {
|
|
192
|
+
width: var(--seed-dimension-x4);
|
|
193
|
+
height: var(--seed-dimension-x4);
|
|
156
194
|
}
|
package/recipes/text-input.d.ts
CHANGED
package/recipes/text-input.mjs
CHANGED
|
@@ -29,15 +29,29 @@ const textInputSlotNames = [
|
|
|
29
29
|
];
|
|
30
30
|
|
|
31
31
|
const defaultVariant = {
|
|
32
|
-
"variant": "outline"
|
|
32
|
+
"variant": "outline",
|
|
33
|
+
"size": "large"
|
|
33
34
|
};
|
|
34
35
|
|
|
35
|
-
const compoundVariants = [
|
|
36
|
+
const compoundVariants = [
|
|
37
|
+
{
|
|
38
|
+
"variant": "outline",
|
|
39
|
+
"size": "large"
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
"variant": "outline",
|
|
43
|
+
"size": "medium"
|
|
44
|
+
}
|
|
45
|
+
];
|
|
36
46
|
|
|
37
47
|
export const textInputVariantMap = {
|
|
38
48
|
"variant": [
|
|
39
49
|
"outline",
|
|
40
50
|
"underline"
|
|
51
|
+
],
|
|
52
|
+
"size": [
|
|
53
|
+
"large",
|
|
54
|
+
"medium"
|
|
41
55
|
]
|
|
42
56
|
};
|
|
43
57
|
|
|
@@ -45,6 +45,7 @@ export { vars as progressCircle } from "./progress-circle";
|
|
|
45
45
|
export { vars as radio } from "./radio";
|
|
46
46
|
export { vars as radiomark } from "./radiomark";
|
|
47
47
|
export { vars as reactionButton } from "./reaction-button";
|
|
48
|
+
export { vars as scrollFog } from "./scroll-fog";
|
|
48
49
|
export { vars as segmentedControlItem } from "./segmented-control-item";
|
|
49
50
|
export { vars as segmentedControl } from "./segmented-control";
|
|
50
51
|
export { vars as selectBox } from "./select-box";
|
package/vars/component/index.mjs
CHANGED
|
@@ -45,6 +45,7 @@ export { vars as progressCircle } from "./progress-circle.mjs";
|
|
|
45
45
|
export { vars as radio } from "./radio.mjs";
|
|
46
46
|
export { vars as radiomark } from "./radiomark.mjs";
|
|
47
47
|
export { vars as reactionButton } from "./reaction-button.mjs";
|
|
48
|
+
export { vars as scrollFog } from "./scroll-fog.mjs";
|
|
48
49
|
export { vars as segmentedControlItem } from "./segmented-control-item.mjs";
|
|
49
50
|
export { vars as segmentedControl } from "./segmented-control.mjs";
|
|
50
51
|
export { vars as selectBox } from "./select-box.mjs";
|