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.
@@ -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.inner": {
255
- "value": "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
256
- "variable": "var(--thread-ui-shadows-inner)"
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
- "blurs.sm": {
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-sm)"
272
+ "variable": "var(--thread-ui-blurs-xs)"
261
273
  },
262
- "blurs.base": {
274
+ "blurs.sm": {
263
275
  "value": "8px",
264
- "variable": "var(--thread-ui-blurs-base)"
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" | "inner"
24
+ export type ShadowToken = "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "inset-2xs" | "inset-xs" | "inset-sm"
25
25
 
26
- export type BlurToken = "sm" | "base" | "md" | "lg" | "xl" | "2xl" | "3xl"
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 Placement =
83
- | 'Top'
84
- | 'Right'
85
- | 'Bottom'
86
- | 'Left'
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
- | 'transform'
113
- | 'color'
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
- /** `[dir=ltr] &` */
197
+ /** `:where([dir=ltr], :dir(ltr)) &` */
198
198
  "_ltr": string
199
- /** `[dir=rtl] &` */
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)` */