@seed-design/lynx-css 0.10.1 → 0.11.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 (58) hide show
  1. package/all.css +1219 -179
  2. package/all.min.css +1 -1
  3. package/package.json +9 -3
  4. package/recipes/accordion.css +10 -0
  5. package/recipes/accordion.d.ts +1 -1
  6. package/recipes/accordion.mjs +4 -0
  7. package/recipes/action-button.css +21 -13
  8. package/recipes/action-button.mjs +30 -11
  9. package/recipes/callout.css +18 -0
  10. package/recipes/callout.d.ts +4 -0
  11. package/recipes/callout.mjs +30 -1
  12. package/recipes/checkbox.css +18 -6
  13. package/recipes/checkbox.d.ts +1 -1
  14. package/recipes/checkbox.mjs +4 -0
  15. package/recipes/checkmark.css +10 -6
  16. package/recipes/chip.css +18 -0
  17. package/recipes/chip.mjs +30 -0
  18. package/recipes/input-button.css +209 -0
  19. package/recipes/input-button.d.ts +40 -0
  20. package/recipes/input-button.mjs +99 -0
  21. package/recipes/list-header.css +22 -0
  22. package/recipes/list-header.d.ts +22 -0
  23. package/recipes/list-header.mjs +29 -0
  24. package/recipes/list-item.css +120 -0
  25. package/recipes/list-item.d.ts +32 -0
  26. package/recipes/list-item.mjs +93 -0
  27. package/recipes/list.css +5 -0
  28. package/recipes/list.d.ts +19 -0
  29. package/recipes/list.mjs +22 -0
  30. package/recipes/menu-item.css +119 -0
  31. package/recipes/menu-item.d.ts +36 -0
  32. package/recipes/menu-item.mjs +91 -0
  33. package/recipes/menu-sheet-item.css +69 -0
  34. package/recipes/menu-sheet-item.d.ts +32 -0
  35. package/recipes/menu-sheet-item.mjs +69 -0
  36. package/recipes/menu-sheet.css +104 -0
  37. package/recipes/menu-sheet.d.ts +28 -0
  38. package/recipes/menu-sheet.mjs +88 -0
  39. package/recipes/menu.css +101 -0
  40. package/recipes/menu.d.ts +32 -0
  41. package/recipes/menu.mjs +85 -0
  42. package/recipes/page-banner.css +136 -99
  43. package/recipes/page-banner.d.ts +4 -0
  44. package/recipes/page-banner.mjs +61 -1
  45. package/recipes/radio.css +3 -0
  46. package/recipes/radiomark.css +4 -1
  47. package/recipes/reaction-button.css +145 -0
  48. package/recipes/reaction-button.d.ts +40 -0
  49. package/recipes/reaction-button.mjs +101 -0
  50. package/recipes/segmented-control.css +16 -2
  51. package/recipes/segmented-control.d.ts +1 -1
  52. package/recipes/segmented-control.mjs +8 -0
  53. package/recipes/select-box.css +12 -0
  54. package/recipes/select-box.d.ts +1 -1
  55. package/recipes/select-box.mjs +4 -0
  56. package/recipes/text-input.css +66 -59
  57. package/scale-feedback/index.d.ts +2 -0
  58. package/scale-feedback/index.mjs +3 -0
package/recipes/text-input.css CHANGED
@@ -4,11 +4,11 @@
4
4
  width: 100%;
5
5
  align-items: center;
6
6
  overflow: hidden;
7
- position: relative
7
+ position: relative;
8
8
  }
9
9
  .seed-text-input__baseStroke {
10
10
  position: absolute;
11
- pointer-events: none
11
+ pointer-events: none;
12
12
  }
13
13
  .seed-text-input__stroke {
14
14
  position: absolute;
@@ -18,7 +18,7 @@
18
18
  left: 0;
19
19
  border-color: transparent;
20
20
  transition: border-color 0.1s var(--seed-timing-function-easing);
21
- pointer-events: none
21
+ pointer-events: none;
22
22
  }
23
23
  .seed-text-input__value {
24
24
  flex-grow: 1;
@@ -28,7 +28,11 @@
28
28
  border-width: 0;
29
29
  background-color: transparent;
30
30
  color: var(--seed-color-fg-neutral);
31
- font-weight: var(--seed-font-weight-regular)
31
+ font-weight: var(--seed-font-weight-regular);
32
+ }
33
+ .seed-text-input__value::placeholder {
34
+ color: var(--seed-color-fg-placeholder);
35
+ font-weight: var(--seed-font-weight-regular);
32
36
  }
33
37
  .seed-text-input__textareaRoot {
34
38
  flex-grow: 1;
@@ -36,7 +40,7 @@
36
40
  align-self: stretch;
37
41
  display: flex;
38
42
  flex-direction: column;
39
- position: relative
43
+ position: relative;
40
44
  }
41
45
  .seed-text-input__textareaAutoresizeRoot {}
42
46
  .seed-text-input__textareaValue {}
@@ -44,26 +48,26 @@
44
48
  .seed-text-input__textareaNativeAutoresize {
45
49
  width: 100%;
46
50
  height: auto;
47
- flex-shrink: 0
51
+ flex-shrink: 0;
48
52
  }
49
53
  .seed-text-input__textareaAndroidAutoresize {}
50
54
  .seed-text-input__prefixText {
51
55
  color: var(--seed-color-fg-neutral-subtle);
52
56
  font-weight: var(--seed-font-weight-regular);
53
- flex-shrink: 0
57
+ flex-shrink: 0;
54
58
  }
55
59
  .seed-text-input__prefixIcon {
56
60
  color: var(--seed-color-fg-neutral-muted);
57
- flex-shrink: 0
61
+ flex-shrink: 0;
58
62
  }
59
63
  .seed-text-input__suffixText {
60
64
  color: var(--seed-color-fg-neutral-subtle);
61
65
  font-weight: var(--seed-font-weight-regular);
62
- flex-shrink: 0
66
+ flex-shrink: 0;
63
67
  }
64
68
  .seed-text-input__suffixIcon {
65
69
  color: var(--seed-color-fg-neutral-muted);
66
- flex-shrink: 0
70
+ flex-shrink: 0;
67
71
  }
68
72
  .seed-text-input__baseStroke--variant_outline {
69
73
  top: 0;
@@ -72,202 +76,205 @@
72
76
  left: 0;
73
77
  border-color: var(--seed-color-stroke-neutral-weak);
74
78
  border-style: solid;
75
- border-width: 1px
79
+ border-width: 1px;
76
80
  }
77
81
  .seed-text-input__stroke--variant_outline {
78
82
  border-style: solid;
79
- border-width: 2px
83
+ border-width: 2px;
80
84
  }
81
85
  .seed-text-input__root--variant_underline {
82
- overflow: visible
86
+ overflow: visible;
83
87
  }
84
88
  .seed-text-input__baseStroke--variant_underline {
85
89
  right: 0;
86
90
  bottom: 0;
87
91
  left: 0;
88
92
  height: 1px;
89
- background-color: var(--seed-color-stroke-neutral-weak)
93
+ background-color: var(--seed-color-stroke-neutral-weak);
90
94
  }
91
95
  .seed-text-input__stroke--variant_underline {
92
96
  border-width: 0;
93
97
  border-bottom-style: solid;
94
- border-bottom-width: 2px
98
+ border-bottom-width: 2px;
95
99
  }
96
100
  .seed-text-input__textareaAutoresizeRoot--size_large {
97
101
  min-height: 94px;
98
102
  padding-top: var(--seed-dimension-x3_5);
99
- padding-bottom: var(--seed-dimension-x3_5)
103
+ padding-bottom: var(--seed-dimension-x3_5);
100
104
  }
101
105
  .seed-text-input__textareaAndroidAutoresize--size_large {
102
106
  min-height: 94px;
103
107
  padding-top: var(--seed-dimension-x3_5);
104
- padding-bottom: var(--seed-dimension-x3_5)
108
+ padding-bottom: var(--seed-dimension-x3_5);
105
109
  }
106
110
  .seed-text-input__textareaFixed--size_large {
107
111
  min-height: 94px;
108
112
  padding-top: var(--seed-dimension-x3_5);
109
- padding-bottom: var(--seed-dimension-x3_5)
113
+ padding-bottom: var(--seed-dimension-x3_5);
110
114
  }
111
115
  .seed-text-input__textareaAutoresizeRoot--size_medium {
112
116
  min-height: 82px;
113
117
  padding-top: var(--seed-dimension-x3);
114
- padding-bottom: var(--seed-dimension-x3)
118
+ padding-bottom: var(--seed-dimension-x3);
115
119
  }
116
120
  .seed-text-input__textareaAndroidAutoresize--size_medium {
117
121
  min-height: 82px;
118
122
  padding-top: var(--seed-dimension-x3);
119
- padding-bottom: var(--seed-dimension-x3)
123
+ padding-bottom: var(--seed-dimension-x3);
120
124
  }
121
125
  .seed-text-input__textareaFixed--size_medium {
122
126
  min-height: 82px;
123
127
  padding-top: var(--seed-dimension-x3);
124
- padding-bottom: var(--seed-dimension-x3)
128
+ padding-bottom: var(--seed-dimension-x3);
125
129
  }
126
130
  .seed-text-input__stroke--focused_true {
127
- border-color: var(--seed-color-stroke-neutral-contrast)
131
+ border-color: var(--seed-color-stroke-neutral-contrast);
128
132
  }
129
133
  .seed-text-input__stroke--invalid_true {
130
- border-color: var(--seed-color-stroke-critical-solid)
134
+ border-color: var(--seed-color-stroke-critical-solid);
131
135
  }
132
136
  .seed-text-input__value--disabled_true {
133
- color: var(--seed-color-fg-disabled)
137
+ color: var(--seed-color-fg-disabled);
138
+ }
139
+ .seed-text-input__value--disabled_true::placeholder {
140
+ color: var(--seed-color-fg-disabled);
134
141
  }
135
142
  .seed-text-input__prefixText--disabled_true {
136
- color: var(--seed-color-fg-disabled)
143
+ color: var(--seed-color-fg-disabled);
137
144
  }
138
145
  .seed-text-input__prefixIcon--disabled_true {
139
- color: var(--seed-color-fg-disabled)
146
+ color: var(--seed-color-fg-disabled);
140
147
  }
141
148
  .seed-text-input__suffixText--disabled_true {
142
- color: var(--seed-color-fg-disabled)
149
+ color: var(--seed-color-fg-disabled);
143
150
  }
144
151
  .seed-text-input__suffixIcon--disabled_true {
145
- color: var(--seed-color-fg-disabled)
152
+ color: var(--seed-color-fg-disabled);
146
153
  }
147
154
  .seed-text-input__root--variant_outline-size_large {
148
155
  gap: var(--seed-dimension-x2_5);
149
156
  min-height: var(--seed-dimension-x13);
150
157
  border-radius: var(--seed-radius-r3);
151
158
  padding-left: var(--seed-dimension-x4);
152
- padding-right: var(--seed-dimension-x4)
159
+ padding-right: var(--seed-dimension-x4);
153
160
  }
154
161
  .seed-text-input__stroke--variant_outline-size_large {
155
- border-radius: var(--seed-radius-r3)
162
+ border-radius: var(--seed-radius-r3);
156
163
  }
157
164
  .seed-text-input__baseStroke--variant_outline-size_large {
158
- border-radius: var(--seed-radius-r3)
165
+ border-radius: var(--seed-radius-r3);
159
166
  }
160
167
  .seed-text-input__value--variant_outline-size_large {
161
168
  font-size: var(--seed-font-size-t5);
162
- line-height: var(--seed-line-height-t5)
169
+ line-height: var(--seed-line-height-t5);
163
170
  }
164
171
  .seed-text-input__prefixText--variant_outline-size_large {
165
172
  font-size: var(--seed-font-size-t5);
166
- line-height: var(--seed-line-height-t5)
173
+ line-height: var(--seed-line-height-t5);
167
174
  }
168
175
  .seed-text-input__prefixIcon--variant_outline-size_large {
169
176
  width: var(--seed-dimension-x5);
170
- height: var(--seed-dimension-x5)
177
+ height: var(--seed-dimension-x5);
171
178
  }
172
179
  .seed-text-input__suffixText--variant_outline-size_large {
173
180
  font-size: var(--seed-font-size-t5);
174
- line-height: var(--seed-line-height-t5)
181
+ line-height: var(--seed-line-height-t5);
175
182
  }
176
183
  .seed-text-input__suffixIcon--variant_outline-size_large {
177
184
  width: var(--seed-dimension-x5);
178
- height: var(--seed-dimension-x5)
185
+ height: var(--seed-dimension-x5);
179
186
  }
180
187
  .seed-text-input__root--variant_outline-size_medium {
181
188
  gap: var(--seed-dimension-x2);
182
189
  min-height: var(--seed-dimension-x10);
183
190
  border-radius: var(--seed-radius-r2);
184
191
  padding-left: var(--seed-dimension-x3_5);
185
- padding-right: var(--seed-dimension-x3_5)
192
+ padding-right: var(--seed-dimension-x3_5);
186
193
  }
187
194
  .seed-text-input__stroke--variant_outline-size_medium {
188
- border-radius: var(--seed-radius-r2)
195
+ border-radius: var(--seed-radius-r2);
189
196
  }
190
197
  .seed-text-input__baseStroke--variant_outline-size_medium {
191
- border-radius: var(--seed-radius-r2)
198
+ border-radius: var(--seed-radius-r2);
192
199
  }
193
200
  .seed-text-input__value--variant_outline-size_medium {
194
201
  font-size: var(--seed-font-size-t4);
195
- line-height: var(--seed-line-height-t4)
202
+ line-height: var(--seed-line-height-t4);
196
203
  }
197
204
  .seed-text-input__prefixText--variant_outline-size_medium {
198
205
  font-size: var(--seed-font-size-t4);
199
- line-height: var(--seed-line-height-t4)
206
+ line-height: var(--seed-line-height-t4);
200
207
  }
201
208
  .seed-text-input__prefixIcon--variant_outline-size_medium {
202
209
  width: var(--seed-dimension-x4);
203
- height: var(--seed-dimension-x4)
210
+ height: var(--seed-dimension-x4);
204
211
  }
205
212
  .seed-text-input__suffixText--variant_outline-size_medium {
206
213
  font-size: var(--seed-font-size-t4);
207
- line-height: var(--seed-line-height-t4)
214
+ line-height: var(--seed-line-height-t4);
208
215
  }
209
216
  .seed-text-input__suffixIcon--variant_outline-size_medium {
210
217
  width: var(--seed-dimension-x4);
211
- height: var(--seed-dimension-x4)
218
+ height: var(--seed-dimension-x4);
212
219
  }
213
220
  .seed-text-input__root--variant_underline-size_large {
214
221
  gap: var(--seed-dimension-x2_5);
215
222
  min-height: var(--seed-dimension-x10);
216
223
  padding-top: var(--seed-dimension-x2);
217
- padding-bottom: var(--seed-dimension-x2)
224
+ padding-bottom: var(--seed-dimension-x2);
218
225
  }
219
226
  .seed-text-input__value--variant_underline-size_large {
220
227
  font-size: var(--seed-font-size-t6);
221
- line-height: var(--seed-line-height-t6)
228
+ line-height: var(--seed-line-height-t6);
222
229
  }
223
230
  .seed-text-input__prefixText--variant_underline-size_large {
224
231
  font-size: var(--seed-font-size-t6);
225
- line-height: var(--seed-line-height-t6)
232
+ line-height: var(--seed-line-height-t6);
226
233
  }
227
234
  .seed-text-input__prefixIcon--variant_underline-size_large {
228
235
  width: var(--seed-dimension-x6);
229
- height: var(--seed-dimension-x6)
236
+ height: var(--seed-dimension-x6);
230
237
  }
231
238
  .seed-text-input__suffixText--variant_underline-size_large {
232
239
  font-size: var(--seed-font-size-t6);
233
- line-height: var(--seed-line-height-t6)
240
+ line-height: var(--seed-line-height-t6);
234
241
  }
235
242
  .seed-text-input__suffixIcon--variant_underline-size_large {
236
243
  width: var(--seed-dimension-x6);
237
- height: var(--seed-dimension-x6)
244
+ height: var(--seed-dimension-x6);
238
245
  }
239
246
  .seed-text-input__root--variant_underline-size_medium {
240
247
  gap: var(--seed-dimension-x2);
241
248
  min-height: 34px;
242
249
  padding-top: var(--seed-dimension-x1_5);
243
- padding-bottom: var(--seed-dimension-x1_5)
250
+ padding-bottom: var(--seed-dimension-x1_5);
244
251
  }
245
252
  .seed-text-input__value--variant_underline-size_medium {
246
253
  font-size: var(--seed-font-size-t5);
247
- line-height: var(--seed-line-height-t5)
254
+ line-height: var(--seed-line-height-t5);
248
255
  }
249
256
  .seed-text-input__prefixText--variant_underline-size_medium {
250
257
  font-size: var(--seed-font-size-t5);
251
- line-height: var(--seed-line-height-t5)
258
+ line-height: var(--seed-line-height-t5);
252
259
  }
253
260
  .seed-text-input__prefixIcon--variant_underline-size_medium {
254
261
  width: var(--seed-dimension-x5);
255
- height: var(--seed-dimension-x5)
262
+ height: var(--seed-dimension-x5);
256
263
  }
257
264
  .seed-text-input__suffixText--variant_underline-size_medium {
258
265
  font-size: var(--seed-font-size-t5);
259
- line-height: var(--seed-line-height-t5)
266
+ line-height: var(--seed-line-height-t5);
260
267
  }
261
268
  .seed-text-input__suffixIcon--variant_underline-size_medium {
262
269
  width: var(--seed-dimension-x5);
263
- height: var(--seed-dimension-x5)
270
+ height: var(--seed-dimension-x5);
264
271
  }
265
272
  .seed-text-input__root--variant_outline-readOnly_true-disabled_false {
266
- background: var(--seed-color-bg-disabled)
273
+ background: var(--seed-color-bg-disabled);
267
274
  }
268
275
  .seed-text-input__value--variant_underline-readOnly_true-disabled_false {
269
- color: var(--seed-color-fg-neutral-muted)
276
+ color: var(--seed-color-fg-neutral-muted);
270
277
  }
271
278
  .seed-text-input__root--variant_outline-disabled_true {
272
- background: var(--seed-color-bg-disabled)
279
+ background: var(--seed-color-bg-disabled);
273
280
  }
package/scale-feedback/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export declare const feedbackScaleDuration: 150;
2
+ export declare const feedbackScaleTimingFunction: "cubic-bezier(0, 0, 0.15, 1)";
package/scale-feedback/index.mjs ADDED
@@ -0,0 +1,3 @@
1
+ // Generated from Rootage pressed-scale motion tokens. Do not edit directly.
2
+ export const feedbackScaleDuration = 150;
3
+ export const feedbackScaleTimingFunction = "cubic-bezier(0, 0, 0.15, 1)";