@seed-design/css 1.0.6 → 1.1.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 (69) hide show
  1. package/all.css +885 -514
  2. package/all.min.css +1 -1
  3. package/base.css +32 -0
  4. package/base.min.css +1 -1
  5. package/package.json +1 -1
  6. package/recipes/action-button.css +8 -1
  7. package/recipes/app-screen.css +16 -0
  8. package/recipes/app-screen.d.ts +4 -0
  9. package/recipes/app-screen.mjs +6 -1
  10. package/recipes/article.css +0 -3
  11. package/recipes/bottom-sheet-handle.css +24 -0
  12. package/recipes/bottom-sheet-handle.d.ts +21 -0
  13. package/recipes/bottom-sheet-handle.mjs +36 -0
  14. package/recipes/bottom-sheet.css +55 -32
  15. package/recipes/callout.css +2 -0
  16. package/recipes/field-label.css +29 -0
  17. package/recipes/field-label.d.ts +24 -0
  18. package/recipes/field-label.mjs +47 -0
  19. package/recipes/field.css +63 -0
  20. package/recipes/field.d.ts +21 -0
  21. package/recipes/field.mjs +60 -0
  22. package/recipes/input-button.css +98 -0
  23. package/recipes/input-button.d.ts +21 -0
  24. package/recipes/input-button.mjs +64 -0
  25. package/recipes/list-item.css +1 -1
  26. package/recipes/page-banner.css +6 -1
  27. package/recipes/page-banner.d.ts +1 -1
  28. package/recipes/page-banner.mjs +6 -2
  29. package/recipes/slider-marker.css +42 -0
  30. package/recipes/slider-marker.d.ts +22 -0
  31. package/recipes/slider-marker.mjs +30 -0
  32. package/recipes/slider-tick.css +19 -0
  33. package/recipes/slider-tick.d.ts +22 -0
  34. package/recipes/slider-tick.mjs +29 -0
  35. package/recipes/slider.css +174 -0
  36. package/recipes/slider.d.ts +21 -0
  37. package/recipes/slider.mjs +68 -0
  38. package/recipes/text-input.css +156 -0
  39. package/recipes/text-input.d.ts +24 -0
  40. package/recipes/text-input.mjs +59 -0
  41. package/vars/component/bottom-sheet-handle.d.ts +24 -0
  42. package/vars/component/bottom-sheet-handle.mjs +24 -0
  43. package/vars/component/bottom-sheet.d.ts +2 -2
  44. package/vars/component/bottom-sheet.mjs +2 -2
  45. package/vars/component/field-label.d.ts +25 -0
  46. package/vars/component/field-label.mjs +25 -0
  47. package/vars/component/field.d.ts +72 -0
  48. package/vars/component/field.mjs +72 -0
  49. package/vars/component/index.d.ts +8 -1
  50. package/vars/component/index.mjs +8 -1
  51. package/vars/component/input-button.d.ts +78 -0
  52. package/vars/component/input-button.mjs +78 -0
  53. package/vars/component/list-item.d.ts +1 -1
  54. package/vars/component/list-item.mjs +1 -1
  55. package/vars/component/page-banner.d.ts +1 -1
  56. package/vars/component/page-banner.mjs +1 -1
  57. package/vars/component/slider-thumb.d.ts +25 -0
  58. package/vars/component/slider-thumb.mjs +25 -0
  59. package/vars/component/slider-tick.d.ts +23 -0
  60. package/vars/component/slider-tick.mjs +23 -0
  61. package/vars/component/slider.d.ts +74 -0
  62. package/vars/component/slider.mjs +74 -0
  63. package/vars/component/text-input.d.ts +162 -0
  64. package/vars/component/text-input.mjs +162 -0
  65. package/recipes/text-field.css +0 -379
  66. package/recipes/text-field.d.ts +0 -24
  67. package/recipes/text-field.mjs +0 -104
  68. package/vars/component/text-field.d.ts +0 -294
  69. package/vars/component/text-field.mjs +0 -294
package/vars/component/slider.mjs ADDED
@@ -0,0 +1,74 @@
1
+ export const vars = {
2
+ "base": {
3
+ "enabled": {
4
+ "root": {
5
+ "gap": "var(--seed-dimension-x0_5)"
6
+ },
7
+ "control": {
8
+ "height": "26px"
9
+ },
10
+ "track": {
11
+ "height": "var(--seed-dimension-x1)",
12
+ "cornerRadius": "var(--seed-radius-full)",
13
+ "color": "var(--seed-color-palette-gray-400)"
14
+ },
15
+ "range": {
16
+ "cornerRadius": "var(--seed-radius-full)",
17
+ "color": "var(--seed-color-fg-neutral)",
18
+ "widthDuration": "var(--seed-duration-d3)",
19
+ "widthTimingFunction": "var(--seed-timing-function-easing)"
20
+ },
21
+ "thumb": {
22
+ "size": "var(--seed-dimension-x5)",
23
+ "cornerRadius": "var(--seed-radius-full)",
24
+ "color": "var(--seed-color-bg-neutral-inverted)"
25
+ },
26
+ "valueIndicatorRoot": {
27
+ "color": "var(--seed-color-bg-neutral-inverted)",
28
+ "cornerRadius": "var(--seed-radius-r1)",
29
+ "paddingX": "var(--seed-dimension-x1_5)",
30
+ "paddingY": "var(--seed-dimension-x0_5)",
31
+ "offsetY": "var(--seed-dimension-x3)",
32
+ "enterScale": "0.9",
33
+ "enterOpacity": "0",
34
+ "enterDuration": "var(--seed-duration-d4)",
35
+ "enterTimingFunction": "var(--seed-timing-function-enter)",
36
+ "exitScale": "1",
37
+ "exitOpacity": "0",
38
+ "exitDuration": "var(--seed-duration-d4)",
39
+ "exitTimingFunction": "var(--seed-timing-function-easing)"
40
+ },
41
+ "valueIndicatorArrow": {
42
+ "color": "var(--seed-color-bg-neutral-inverted)",
43
+ "width": "var(--seed-dimension-x2_5)",
44
+ "height": "7px",
45
+ "cornerRadius": "var(--seed-radius-r0_5)",
46
+ "gutter": "var(--seed-dimension-x0_5)",
47
+ "padding": "var(--seed-dimension-x0_5)"
48
+ },
49
+ "valueIndicatorLabel": {
50
+ "color": "var(--seed-color-fg-neutral-inverted)",
51
+ "fontSize": "var(--seed-font-size-t1)",
52
+ "lineHeight": "var(--seed-line-height-t1)",
53
+ "fontWeight": "var(--seed-font-weight-medium)"
54
+ },
55
+ "marker": {
56
+ "color": "var(--seed-color-fg-neutral-muted)",
57
+ "fontWeight": "var(--seed-font-weight-regular)",
58
+ "fontSize": "var(--seed-font-size-t3)",
59
+ "lineHeight": "var(--seed-line-height-t3)"
60
+ }
61
+ },
62
+ "disabled": {
63
+ "range": {
64
+ "color": "var(--seed-color-fg-disabled)"
65
+ },
66
+ "thumb": {
67
+ "color": "var(--seed-color-fg-disabled)"
68
+ },
69
+ "marker": {
70
+ "color": "var(--seed-color-fg-disabled)"
71
+ }
72
+ }
73
+ }
74
+ }
package/vars/component/text-input.d.ts ADDED
@@ -0,0 +1,162 @@
1
+ export declare const vars: {
2
+ "base": {
3
+ "enabled": {
4
+ "root": {
5
+ "gap": "var(--seed-dimension-x2_5)",
6
+ "strokeColor": "var(--seed-color-stroke-neutral-weak)",
7
+ "strokeColorDuration": "var(--seed-duration-d3)",
8
+ "strokeColorTimingFunction": "var(--seed-timing-function-easing)",
9
+ "strokeWidthDuration": "var(--seed-duration-d3)",
10
+ "strokeWidthTimingFunction": "var(--seed-timing-function-easing)"
11
+ },
12
+ "value": {
13
+ "color": "var(--seed-color-fg-neutral)",
14
+ "fontWeight": "var(--seed-font-weight-regular)"
15
+ },
16
+ "placeholder": {
17
+ "color": "var(--seed-color-fg-placeholder)",
18
+ "fontWeight": "var(--seed-font-weight-regular)"
19
+ },
20
+ "prefixText": {
21
+ "color": "var(--seed-color-fg-neutral-muted)",
22
+ "fontWeight": "var(--seed-font-weight-regular)"
23
+ },
24
+ "prefixIcon": {
25
+ "color": "var(--seed-color-fg-neutral-muted)"
26
+ },
27
+ "suffixText": {
28
+ "color": "var(--seed-color-fg-neutral-muted)",
29
+ "fontWeight": "var(--seed-font-weight-regular)"
30
+ },
31
+ "suffixIcon": {
32
+ "color": "var(--seed-color-fg-neutral-muted)"
33
+ }
34
+ },
35
+ "focused": {
36
+ "root": {
37
+ "strokeColor": "var(--seed-color-stroke-neutral-contrast)"
38
+ }
39
+ },
40
+ "invalid": {
41
+ "root": {
42
+ "strokeColor": "var(--seed-color-stroke-critical-solid)"
43
+ }
44
+ },
45
+ "invalidFocused": {
46
+ "root": {
47
+ "strokeColor": "var(--seed-color-stroke-critical-solid)"
48
+ }
49
+ },
50
+ "readonly": {
51
+ "value": {
52
+ "color": "var(--seed-color-fg-neutral-muted)"
53
+ },
54
+ "placeholder": {
55
+ "color": "var(--seed-color-fg-neutral-muted)"
56
+ }
57
+ },
58
+ "disabled": {
59
+ "value": {
60
+ "color": "var(--seed-color-fg-disabled)"
61
+ },
62
+ "placeholder": {
63
+ "color": "var(--seed-color-fg-disabled)"
64
+ }
65
+ }
66
+ },
67
+ "variantOutline": {
68
+ "enabled": {
69
+ "root": {
70
+ "minHeight": "var(--seed-dimension-x13)",
71
+ "cornerRadius": "var(--seed-radius-r3)",
72
+ "paddingX": "var(--seed-dimension-x4)",
73
+ "strokeWidth": "1px"
74
+ },
75
+ "value": {
76
+ "fontSize": "var(--seed-font-size-t5)",
77
+ "lineHeight": "var(--seed-line-height-t5)"
78
+ },
79
+ "placeholder": {
80
+ "fontSize": "var(--seed-font-size-t5)",
81
+ "lineHeight": "var(--seed-line-height-t5)"
82
+ },
83
+ "prefixText": {
84
+ "fontSize": "var(--seed-font-size-t5)",
85
+ "lineHeight": "var(--seed-line-height-t5)"
86
+ },
87
+ "prefixIcon": {
88
+ "size": "var(--seed-dimension-x5)"
89
+ },
90
+ "suffixText": {
91
+ "fontSize": "var(--seed-font-size-t5)",
92
+ "lineHeight": "var(--seed-line-height-t5)"
93
+ },
94
+ "suffixIcon": {
95
+ "size": "var(--seed-dimension-x5)"
96
+ }
97
+ },
98
+ "focused": {
99
+ "root": {
100
+ "strokeWidth": "2px"
101
+ }
102
+ },
103
+ "invalid": {
104
+ "root": {
105
+ "strokeWidth": "2px"
106
+ }
107
+ },
108
+ "disabled": {
109
+ "root": {
110
+ "color": "var(--seed-color-bg-disabled)"
111
+ }
112
+ }
113
+ },
114
+ "variantUnderline": {
115
+ "enabled": {
116
+ "root": {
117
+ "minHeight": "var(--seed-dimension-x10)",
118
+ "strokeBottomWidth": "1px"
119
+ },
120
+ "value": {
121
+ "fontSize": "var(--seed-font-size-t6)",
122
+ "lineHeight": "var(--seed-line-height-t6)"
123
+ },
124
+ "placeholder": {
125
+ "fontSize": "var(--seed-font-size-t6)",
126
+ "lineHeight": "var(--seed-line-height-t6)"
127
+ },
128
+ "prefixText": {
129
+ "fontSize": "var(--seed-font-size-t6)",
130
+ "lineHeight": "var(--seed-line-height-t6)"
131
+ },
132
+ "prefixIcon": {
133
+ "size": "var(--seed-dimension-x6)"
134
+ },
135
+ "suffixText": {
136
+ "fontSize": "var(--seed-font-size-t6)",
137
+ "lineHeight": "var(--seed-line-height-t6)"
138
+ },
139
+ "suffixIcon": {
140
+ "size": "var(--seed-dimension-x6)"
141
+ }
142
+ },
143
+ "focused": {
144
+ "root": {
145
+ "strokeBottomWidth": "2px"
146
+ }
147
+ },
148
+ "invalid": {
149
+ "root": {
150
+ "strokeBottomWidth": "2px"
151
+ }
152
+ }
153
+ },
154
+ "typeMultiline": {
155
+ "enabled": {
156
+ "root": {
157
+ "minHeight": "95px",
158
+ "paddingY": "var(--seed-dimension-x3_5)"
159
+ }
160
+ }
161
+ }
162
+ }
package/vars/component/text-input.mjs ADDED
@@ -0,0 +1,162 @@
1
+ export const vars = {
2
+ "base": {
3
+ "enabled": {
4
+ "root": {
5
+ "gap": "var(--seed-dimension-x2_5)",
6
+ "strokeColor": "var(--seed-color-stroke-neutral-weak)",
7
+ "strokeColorDuration": "var(--seed-duration-d3)",
8
+ "strokeColorTimingFunction": "var(--seed-timing-function-easing)",
9
+ "strokeWidthDuration": "var(--seed-duration-d3)",
10
+ "strokeWidthTimingFunction": "var(--seed-timing-function-easing)"
11
+ },
12
+ "value": {
13
+ "color": "var(--seed-color-fg-neutral)",
14
+ "fontWeight": "var(--seed-font-weight-regular)"
15
+ },
16
+ "placeholder": {
17
+ "color": "var(--seed-color-fg-placeholder)",
18
+ "fontWeight": "var(--seed-font-weight-regular)"
19
+ },
20
+ "prefixText": {
21
+ "color": "var(--seed-color-fg-neutral-muted)",
22
+ "fontWeight": "var(--seed-font-weight-regular)"
23
+ },
24
+ "prefixIcon": {
25
+ "color": "var(--seed-color-fg-neutral-muted)"
26
+ },
27
+ "suffixText": {
28
+ "color": "var(--seed-color-fg-neutral-muted)",
29
+ "fontWeight": "var(--seed-font-weight-regular)"
30
+ },
31
+ "suffixIcon": {
32
+ "color": "var(--seed-color-fg-neutral-muted)"
33
+ }
34
+ },
35
+ "focused": {
36
+ "root": {
37
+ "strokeColor": "var(--seed-color-stroke-neutral-contrast)"
38
+ }
39
+ },
40
+ "invalid": {
41
+ "root": {
42
+ "strokeColor": "var(--seed-color-stroke-critical-solid)"
43
+ }
44
+ },
45
+ "invalidFocused": {
46
+ "root": {
47
+ "strokeColor": "var(--seed-color-stroke-critical-solid)"
48
+ }
49
+ },
50
+ "readonly": {
51
+ "value": {
52
+ "color": "var(--seed-color-fg-neutral-muted)"
53
+ },
54
+ "placeholder": {
55
+ "color": "var(--seed-color-fg-neutral-muted)"
56
+ }
57
+ },
58
+ "disabled": {
59
+ "value": {
60
+ "color": "var(--seed-color-fg-disabled)"
61
+ },
62
+ "placeholder": {
63
+ "color": "var(--seed-color-fg-disabled)"
64
+ }
65
+ }
66
+ },
67
+ "variantOutline": {
68
+ "enabled": {
69
+ "root": {
70
+ "minHeight": "var(--seed-dimension-x13)",
71
+ "cornerRadius": "var(--seed-radius-r3)",
72
+ "paddingX": "var(--seed-dimension-x4)",
73
+ "strokeWidth": "1px"
74
+ },
75
+ "value": {
76
+ "fontSize": "var(--seed-font-size-t5)",
77
+ "lineHeight": "var(--seed-line-height-t5)"
78
+ },
79
+ "placeholder": {
80
+ "fontSize": "var(--seed-font-size-t5)",
81
+ "lineHeight": "var(--seed-line-height-t5)"
82
+ },
83
+ "prefixText": {
84
+ "fontSize": "var(--seed-font-size-t5)",
85
+ "lineHeight": "var(--seed-line-height-t5)"
86
+ },
87
+ "prefixIcon": {
88
+ "size": "var(--seed-dimension-x5)"
89
+ },
90
+ "suffixText": {
91
+ "fontSize": "var(--seed-font-size-t5)",
92
+ "lineHeight": "var(--seed-line-height-t5)"
93
+ },
94
+ "suffixIcon": {
95
+ "size": "var(--seed-dimension-x5)"
96
+ }
97
+ },
98
+ "focused": {
99
+ "root": {
100
+ "strokeWidth": "2px"
101
+ }
102
+ },
103
+ "invalid": {
104
+ "root": {
105
+ "strokeWidth": "2px"
106
+ }
107
+ },
108
+ "disabled": {
109
+ "root": {
110
+ "color": "var(--seed-color-bg-disabled)"
111
+ }
112
+ }
113
+ },
114
+ "variantUnderline": {
115
+ "enabled": {
116
+ "root": {
117
+ "minHeight": "var(--seed-dimension-x10)",
118
+ "strokeBottomWidth": "1px"
119
+ },
120
+ "value": {
121
+ "fontSize": "var(--seed-font-size-t6)",
122
+ "lineHeight": "var(--seed-line-height-t6)"
123
+ },
124
+ "placeholder": {
125
+ "fontSize": "var(--seed-font-size-t6)",
126
+ "lineHeight": "var(--seed-line-height-t6)"
127
+ },
128
+ "prefixText": {
129
+ "fontSize": "var(--seed-font-size-t6)",
130
+ "lineHeight": "var(--seed-line-height-t6)"
131
+ },
132
+ "prefixIcon": {
133
+ "size": "var(--seed-dimension-x6)"
134
+ },
135
+ "suffixText": {
136
+ "fontSize": "var(--seed-font-size-t6)",
137
+ "lineHeight": "var(--seed-line-height-t6)"
138
+ },
139
+ "suffixIcon": {
140
+ "size": "var(--seed-dimension-x6)"
141
+ }
142
+ },
143
+ "focused": {
144
+ "root": {
145
+ "strokeBottomWidth": "2px"
146
+ }
147
+ },
148
+ "invalid": {
149
+ "root": {
150
+ "strokeBottomWidth": "2px"
151
+ }
152
+ }
153
+ },
154
+ "typeMultiline": {
155
+ "enabled": {
156
+ "root": {
157
+ "minHeight": "95px",
158
+ "paddingY": "var(--seed-dimension-x3_5)"
159
+ }
160
+ }
161
+ }
162
+ }