thread-ui 0.4.1 → 0.4.2
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/dist/components/media/info-card/index.d.ts +1 -1
- package/dist/styled-system/css/conditions.mjs +1 -1
- package/dist/styled-system/css/css.mjs +1 -1
- package/dist/styled-system/css/sva.mjs +9 -4
- package/dist/styled-system/helpers.mjs +11 -22
- package/dist/styled-system/patterns/divider.d.ts +1 -1
- package/dist/styled-system/patterns/float.d.ts +1 -1
- package/dist/styled-system/patterns/grid.mjs +1 -1
- package/dist/styled-system/patterns/hstack.mjs +1 -1
- package/dist/styled-system/patterns/stack.mjs +1 -1
- package/dist/styled-system/patterns/vstack.mjs +1 -1
- package/dist/styled-system/patterns/wrap.mjs +1 -1
- package/dist/styled-system/recipes/button.d.ts +3 -0
- package/dist/styled-system/styles.css +1 -2225
- package/dist/styled-system/tokens/index.mjs +43 -7
- package/dist/styled-system/tokens/tokens.d.ts +4 -4
- package/dist/styled-system/types/composition.d.ts +86 -23
- package/dist/styled-system/types/conditions.d.ts +8 -4
- package/dist/styled-system/types/csstype.d.ts +6405 -5133
- package/dist/styled-system/types/pattern.d.ts +4 -4
- package/dist/styled-system/types/prop-type.d.ts +11 -1
- package/dist/styled-system/types/style-props.d.ts +2763 -2165
- package/dist/styled-system/types/system-types.d.ts +38 -80
- package/dist/styles/panda.css +1 -1
- package/package.json +10 -8
|
@@ -227,6 +227,10 @@ const tokens = {
|
|
|
227
227
|
"value": "8rem",
|
|
228
228
|
"variable": "var(--thread-ui-font-sizes-9xl)"
|
|
229
229
|
},
|
|
230
|
+
"shadows.2xs": {
|
|
231
|
+
"value": "0 1px rgb(0 0 0 / 0.05)",
|
|
232
|
+
"variable": "var(--thread-ui-shadows-2xs)"
|
|
233
|
+
},
|
|
230
234
|
"shadows.xs": {
|
|
231
235
|
"value": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
|
|
232
236
|
"variable": "var(--thread-ui-shadows-xs)"
|
|
@@ -251,17 +255,25 @@ const tokens = {
|
|
|
251
255
|
"value": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
|
|
252
256
|
"variable": "var(--thread-ui-shadows-2xl)"
|
|
253
257
|
},
|
|
254
|
-
"shadows.
|
|
255
|
-
"value": "inset 0
|
|
256
|
-
"variable": "var(--thread-ui-shadows-
|
|
258
|
+
"shadows.inset-2xs": {
|
|
259
|
+
"value": "inset 0 1px rgb(0 0 0 / 0.05)",
|
|
260
|
+
"variable": "var(--thread-ui-shadows-inset-2xs)"
|
|
257
261
|
},
|
|
258
|
-
"
|
|
262
|
+
"shadows.inset-xs": {
|
|
263
|
+
"value": "inset 0 1px 1px rgb(0 0 0 / 0.05)",
|
|
264
|
+
"variable": "var(--thread-ui-shadows-inset-xs)"
|
|
265
|
+
},
|
|
266
|
+
"shadows.inset-sm": {
|
|
267
|
+
"value": "inset 0 2px 4px rgb(0 0 0 / 0.05)",
|
|
268
|
+
"variable": "var(--thread-ui-shadows-inset-sm)"
|
|
269
|
+
},
|
|
270
|
+
"blurs.xs": {
|
|
259
271
|
"value": "4px",
|
|
260
|
-
"variable": "var(--thread-ui-blurs-
|
|
272
|
+
"variable": "var(--thread-ui-blurs-xs)"
|
|
261
273
|
},
|
|
262
|
-
"blurs.
|
|
274
|
+
"blurs.sm": {
|
|
263
275
|
"value": "8px",
|
|
264
|
-
"variable": "var(--thread-ui-blurs-
|
|
276
|
+
"variable": "var(--thread-ui-blurs-sm)"
|
|
265
277
|
},
|
|
266
278
|
"blurs.md": {
|
|
267
279
|
"value": "12px",
|
|
@@ -419,6 +431,14 @@ const tokens = {
|
|
|
419
431
|
"value": "0.875rem",
|
|
420
432
|
"variable": "var(--thread-ui-spacing-3\\.5)"
|
|
421
433
|
},
|
|
434
|
+
"spacing.4.5": {
|
|
435
|
+
"value": "1.125rem",
|
|
436
|
+
"variable": "var(--thread-ui-spacing-4\\.5)"
|
|
437
|
+
},
|
|
438
|
+
"spacing.5.5": {
|
|
439
|
+
"value": "1.375rem",
|
|
440
|
+
"variable": "var(--thread-ui-spacing-5\\.5)"
|
|
441
|
+
},
|
|
422
442
|
"sizes.0": {
|
|
423
443
|
"value": "0rem",
|
|
424
444
|
"variable": "var(--thread-ui-sizes-0)"
|
|
@@ -555,6 +575,14 @@ const tokens = {
|
|
|
555
575
|
"value": "0.875rem",
|
|
556
576
|
"variable": "var(--thread-ui-sizes-3\\.5)"
|
|
557
577
|
},
|
|
578
|
+
"sizes.4.5": {
|
|
579
|
+
"value": "1.125rem",
|
|
580
|
+
"variable": "var(--thread-ui-sizes-4\\.5)"
|
|
581
|
+
},
|
|
582
|
+
"sizes.5.5": {
|
|
583
|
+
"value": "1.375rem",
|
|
584
|
+
"variable": "var(--thread-ui-sizes-5\\.5)"
|
|
585
|
+
},
|
|
558
586
|
"sizes.xs": {
|
|
559
587
|
"value": "20rem",
|
|
560
588
|
"variable": "var(--thread-ui-sizes-xs)"
|
|
@@ -1975,6 +2003,14 @@ const tokens = {
|
|
|
1975
2003
|
"value": "calc(var(--thread-ui-spacing-3\\.5) * -1)",
|
|
1976
2004
|
"variable": "var(--thread-ui-spacing-3\\.5)"
|
|
1977
2005
|
},
|
|
2006
|
+
"spacing.-4.5": {
|
|
2007
|
+
"value": "calc(var(--thread-ui-spacing-4\\.5) * -1)",
|
|
2008
|
+
"variable": "var(--thread-ui-spacing-4\\.5)"
|
|
2009
|
+
},
|
|
2010
|
+
"spacing.-5.5": {
|
|
2011
|
+
"value": "calc(var(--thread-ui-spacing-5\\.5) * -1)",
|
|
2012
|
+
"variable": "var(--thread-ui-spacing-5\\.5)"
|
|
2013
|
+
},
|
|
1978
2014
|
"colors.colorPalette": {
|
|
1979
2015
|
"value": "var(--thread-ui-colors-color-palette)",
|
|
1980
2016
|
"variable": "var(--thread-ui-colors-color-palette)"
|
|
@@ -21,13 +21,13 @@ export type LetterSpacingToken = "tighter" | "tight" | "normal" | "wide" | "wide
|
|
|
21
21
|
|
|
22
22
|
export type FontSizeToken = "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl"
|
|
23
23
|
|
|
24
|
-
export type ShadowToken = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "
|
|
24
|
+
export type ShadowToken = "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "inset-2xs" | "inset-xs" | "inset-sm"
|
|
25
25
|
|
|
26
|
-
export type BlurToken = "
|
|
26
|
+
export type BlurToken = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl"
|
|
27
27
|
|
|
28
|
-
export type SpacingToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-0.5" | "-1.5" | "-2.5" | "-3.5"
|
|
28
|
+
export type SpacingToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5"
|
|
29
29
|
|
|
30
|
-
export type SizeToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "prose" | "full" | "min" | "max" | "fit" | "breakpoint-sm" | "breakpoint-md" | "breakpoint-lg" | "breakpoint-xl" | "breakpoint-2xl"
|
|
30
|
+
export type SizeToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "prose" | "full" | "min" | "max" | "fit" | "breakpoint-sm" | "breakpoint-md" | "breakpoint-lg" | "breakpoint-xl" | "breakpoint-2xl"
|
|
31
31
|
|
|
32
32
|
export type AnimationToken = "spin" | "ping" | "pulse" | "bounce"
|
|
33
33
|
|
|
@@ -15,6 +15,8 @@ interface Recursive<T> {
|
|
|
15
15
|
* -----------------------------------------------------------------------------*/
|
|
16
16
|
|
|
17
17
|
type TextStyleProperty =
|
|
18
|
+
| 'color'
|
|
19
|
+
| 'direction'
|
|
18
20
|
| 'font'
|
|
19
21
|
| 'fontFamily'
|
|
20
22
|
| 'fontFeatureSettings'
|
|
@@ -35,6 +37,7 @@ type TextStyleProperty =
|
|
|
35
37
|
| 'fontVariantPosition'
|
|
36
38
|
| 'fontVariationSettings'
|
|
37
39
|
| 'fontWeight'
|
|
40
|
+
| 'hangingPunctuation'
|
|
38
41
|
| 'hypens'
|
|
39
42
|
| 'hyphenateCharacter'
|
|
40
43
|
| 'hyphenateLimitChars'
|
|
@@ -43,11 +46,20 @@ type TextStyleProperty =
|
|
|
43
46
|
| 'lineHeight'
|
|
44
47
|
| 'quotes'
|
|
45
48
|
| 'overflowWrap'
|
|
49
|
+
| 'tabSize'
|
|
50
|
+
| 'textAlign'
|
|
51
|
+
| 'textAlignLast'
|
|
52
|
+
| 'textBox'
|
|
53
|
+
| 'textBoxEdge'
|
|
54
|
+
| 'textBoxTrim'
|
|
46
55
|
| 'textCombineUpright'
|
|
47
56
|
| 'textDecoration'
|
|
48
57
|
| 'textDecorationColor'
|
|
49
58
|
| 'textDecorationLine'
|
|
59
|
+
| 'textDecorationSkip'
|
|
60
|
+
| 'textDecorationSkipBox'
|
|
50
61
|
| 'textDecorationSkipInk'
|
|
62
|
+
| 'textDecorationSkipInset'
|
|
51
63
|
| 'textDecorationStyle'
|
|
52
64
|
| 'textDecorationThickness'
|
|
53
65
|
| 'textEmphasis'
|
|
@@ -60,16 +72,21 @@ type TextStyleProperty =
|
|
|
60
72
|
| 'textOverflow'
|
|
61
73
|
| 'textRendering'
|
|
62
74
|
| 'textShadow'
|
|
75
|
+
| 'textStroke'
|
|
76
|
+
| 'textStrokeColor'
|
|
77
|
+
| 'textStrokeWidth'
|
|
63
78
|
| 'textTransform'
|
|
64
79
|
| 'textUnderlineOffset'
|
|
65
80
|
| 'textUnderlinePosition'
|
|
66
81
|
| 'textWrap'
|
|
67
82
|
| 'textWrapMode'
|
|
68
83
|
| 'textWrapStyle'
|
|
84
|
+
| 'unicodeBidi'
|
|
69
85
|
| 'verticalAlign'
|
|
70
86
|
| 'whiteSpace'
|
|
71
87
|
| 'wordBreak'
|
|
72
88
|
| 'wordSpacing'
|
|
89
|
+
| 'writingMode'
|
|
73
90
|
|
|
74
91
|
export type TextStyle = CompositionStyleObject<TextStyleProperty>
|
|
75
92
|
|
|
@@ -79,17 +96,11 @@ export type TextStyles = Recursive<Token<TextStyle>>
|
|
|
79
96
|
* Layer styles
|
|
80
97
|
* -----------------------------------------------------------------------------*/
|
|
81
98
|
|
|
82
|
-
type
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
| 'Inline'
|
|
88
|
-
| 'Block'
|
|
89
|
-
| 'InlineStart'
|
|
90
|
-
| 'InlineEnd'
|
|
91
|
-
| 'BlockStart'
|
|
92
|
-
| 'BlockEnd'
|
|
99
|
+
type LogicalPlacement = 'Inline' | 'Block' | 'InlineStart' | 'InlineEnd' | 'BlockStart' | 'BlockEnd'
|
|
100
|
+
|
|
101
|
+
type PhysicalPlacement = 'Top' | 'Right' | 'Bottom' | 'Left'
|
|
102
|
+
|
|
103
|
+
type Placement = PhysicalPlacement | LogicalPlacement
|
|
93
104
|
|
|
94
105
|
type Radius =
|
|
95
106
|
| `Top${'Right' | 'Left'}`
|
|
@@ -98,20 +109,80 @@ type Radius =
|
|
|
98
109
|
| `End${'Start' | 'End'}`
|
|
99
110
|
|
|
100
111
|
type LayerStyleProperty =
|
|
112
|
+
| 'aspectRatio'
|
|
101
113
|
| 'background'
|
|
102
114
|
| 'backgroundColor'
|
|
103
115
|
| 'backgroundImage'
|
|
104
|
-
| 'borderRadius'
|
|
105
116
|
| 'border'
|
|
106
|
-
| 'borderWidth'
|
|
107
117
|
| 'borderColor'
|
|
118
|
+
| 'borderImage'
|
|
119
|
+
| 'borderImageOutset'
|
|
120
|
+
| 'borderImageRepeat'
|
|
121
|
+
| 'borderImageSlice'
|
|
122
|
+
| 'borderImageSource'
|
|
123
|
+
| 'borderImageWidth'
|
|
124
|
+
| 'borderRadius'
|
|
108
125
|
| 'borderStyle'
|
|
126
|
+
| 'borderWidth'
|
|
127
|
+
| `border${Placement}`
|
|
128
|
+
| `border${Placement}Color`
|
|
129
|
+
| `border${Placement}Style`
|
|
130
|
+
| `border${Placement}Width`
|
|
131
|
+
| 'borderRadius'
|
|
132
|
+
| `border${Radius}Radius`
|
|
109
133
|
| 'boxShadow'
|
|
134
|
+
| 'boxShadowColor'
|
|
135
|
+
| 'clipPath'
|
|
136
|
+
| 'color'
|
|
137
|
+
| 'contain'
|
|
138
|
+
| 'content'
|
|
139
|
+
| 'contentVisibility'
|
|
140
|
+
| 'cursor'
|
|
141
|
+
| 'display'
|
|
110
142
|
| 'filter'
|
|
111
143
|
| 'backdropFilter'
|
|
112
|
-
| '
|
|
113
|
-
| '
|
|
144
|
+
| 'height'
|
|
145
|
+
| 'width'
|
|
146
|
+
| 'minHeight'
|
|
147
|
+
| 'minWidth'
|
|
148
|
+
| 'maxHeight'
|
|
149
|
+
| 'maxWidth'
|
|
150
|
+
| `margin${Placement}`
|
|
151
|
+
| 'inset'
|
|
152
|
+
| `inset${LogicalPlacement}`
|
|
153
|
+
| Lowercase<PhysicalPlacement>
|
|
154
|
+
| 'isolation'
|
|
155
|
+
| 'mask'
|
|
156
|
+
| 'maskClip'
|
|
157
|
+
| 'maskComposite'
|
|
158
|
+
| 'maskImage'
|
|
159
|
+
| 'maskMode'
|
|
160
|
+
| 'maskOrigin'
|
|
161
|
+
| 'maskPosition'
|
|
162
|
+
| 'maskRepeat'
|
|
163
|
+
| 'maskSize'
|
|
164
|
+
| 'mixBlendMode'
|
|
165
|
+
| 'objectFit'
|
|
166
|
+
| 'objectPosition'
|
|
114
167
|
| 'opacity'
|
|
168
|
+
| 'outline'
|
|
169
|
+
| 'outlineColor'
|
|
170
|
+
| 'outlineOffset'
|
|
171
|
+
| 'outlineStyle'
|
|
172
|
+
| 'outlineWidth'
|
|
173
|
+
| 'overflow'
|
|
174
|
+
| 'overflowX'
|
|
175
|
+
| 'overflowY'
|
|
176
|
+
| 'padding'
|
|
177
|
+
| `padding${Placement}`
|
|
178
|
+
| 'pointerEvents'
|
|
179
|
+
| 'position'
|
|
180
|
+
| 'resize'
|
|
181
|
+
| 'transform'
|
|
182
|
+
| 'transition'
|
|
183
|
+
| 'visibility'
|
|
184
|
+
| 'willChange'
|
|
185
|
+
| 'zIndex'
|
|
115
186
|
| 'backgroundBlendMode'
|
|
116
187
|
| 'backgroundAttachment'
|
|
117
188
|
| 'backgroundClip'
|
|
@@ -119,14 +190,6 @@ type LayerStyleProperty =
|
|
|
119
190
|
| 'backgroundPosition'
|
|
120
191
|
| 'backgroundRepeat'
|
|
121
192
|
| 'backgroundSize'
|
|
122
|
-
| `border${Placement}`
|
|
123
|
-
| `border${Placement}Width`
|
|
124
|
-
| 'borderRadius'
|
|
125
|
-
| `border${Radius}Radius`
|
|
126
|
-
| `border${Placement}Color`
|
|
127
|
-
| `border${Placement}Style`
|
|
128
|
-
| 'padding'
|
|
129
|
-
| `padding${Placement}`
|
|
130
193
|
|
|
131
194
|
export type LayerStyle = CompositionStyleObject<LayerStyleProperty>
|
|
132
195
|
|
|
@@ -46,7 +46,7 @@ export interface Conditions {
|
|
|
46
46
|
"_firstLetter": string
|
|
47
47
|
/** `&::first-line` */
|
|
48
48
|
"_firstLine": string
|
|
49
|
-
/** `&::marker` */
|
|
49
|
+
/** `&::marker, &::-webkit-details-marker` */
|
|
50
50
|
"_marker": string
|
|
51
51
|
/** `&::selection` */
|
|
52
52
|
"_selection": string
|
|
@@ -142,7 +142,7 @@ export interface Conditions {
|
|
|
142
142
|
"_default": string
|
|
143
143
|
/** `&:optional` */
|
|
144
144
|
"_optional": string
|
|
145
|
-
/** `&:is([open], [data-open], [data-state="open"])` */
|
|
145
|
+
/** `&:is([open], [data-open], [data-state="open"], :popover-open)` */
|
|
146
146
|
"_open": string
|
|
147
147
|
/** `&:is([closed], [data-closed], [data-state="closed"])` */
|
|
148
148
|
"_closed": string
|
|
@@ -194,9 +194,9 @@ export interface Conditions {
|
|
|
194
194
|
"_lessContrast": string
|
|
195
195
|
/** `@media (prefers-contrast: more)` */
|
|
196
196
|
"_moreContrast": string
|
|
197
|
-
/**
|
|
197
|
+
/** `:where([dir=ltr], :dir(ltr)) &` */
|
|
198
198
|
"_ltr": string
|
|
199
|
-
/**
|
|
199
|
+
/** `:where([dir=rtl], :dir(rtl)) &` */
|
|
200
200
|
"_rtl": string
|
|
201
201
|
/** `&::-webkit-scrollbar` */
|
|
202
202
|
"_scrollbar": string
|
|
@@ -212,6 +212,10 @@ export interface Conditions {
|
|
|
212
212
|
"_icon": string
|
|
213
213
|
/** `@starting-style` */
|
|
214
214
|
"_starting": string
|
|
215
|
+
/** `@media (scripting: none)` */
|
|
216
|
+
"_noscript": string
|
|
217
|
+
/** `@media (inverted-colors: inverted)` */
|
|
218
|
+
"_invertedColors": string
|
|
215
219
|
/** `@media screen and (min-width: 40rem)` */
|
|
216
220
|
"sm": string
|
|
217
221
|
/** `@media screen and (min-width: 40rem) and (max-width: 47.9975rem)` */
|