typewritingclass 0.3.2 → 0.3.4
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/README.md +48 -5
- package/dist/index.cjs +471 -76
- package/dist/index.d.cts +156 -729
- package/dist/index.d.ts +156 -729
- package/dist/index.js +538 -143
- package/dist/rule.d.cts +1 -1
- package/dist/rule.d.ts +1 -1
- package/dist/runtime.d.cts +1 -1
- package/dist/runtime.d.ts +1 -1
- package/dist/{types-C2b7lqJA.d.cts → types-B-eG4WLT.d.cts} +170 -1
- package/dist/{types-C2b7lqJA.d.ts → types-B-eG4WLT.d.ts} +170 -1
- package/package.json +5 -3
- package/preflight.css +203 -0
package/dist/index.d.ts
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
import { S as StyleRule, D as DynamicResult, M as Modifier, a as DynamicValue } from './types-
|
|
2
|
-
export { B as Brand,
|
|
1
|
+
import { S as StyleRule, D as DynamicResult, M as Modifier, C as ColorTokenKey, T as TextSizeTokens, F as FontWeightTokens, a as TrackingTokens, L as LeadingTokens, b as TextAlignTokens, c as FontFamilyTokens, d as TextTransformTokens, e as TextOverflowTokens, f as TextWrapTokens, g as DisplayTokens, A as AlignItemsTokens, J as JustifyTokens, h as SelfTokens, O as OverflowTokens, i as ObjectFitTokens, R as RadiusTokens, j as ShadowTokens, k as CursorTokens, l as DynamicValue } from './types-B-eG4WLT.js';
|
|
2
|
+
export { B as Brand, m as CSSColor, n as CSSFontWeight, o as CSSLength, p as CSSShadow, q as ColorInput, r as RadiusInput, s as ShadowInput, t as SizeInput, u as SpacingInput, U as Utility, v as dynamic, w as isDynamic } from './types-B-eG4WLT.js';
|
|
3
3
|
export { ThemeConfig, ThemeResult, ThemeVars, createTheme } from './theme/createTheme.js';
|
|
4
4
|
export { i as injectTheme, s as setTheme } from './inject-theme-CTzyfQH0.js';
|
|
5
|
-
import { T as TextSize } from './typography-C8wipcCK.js';
|
|
6
5
|
|
|
7
6
|
/**
|
|
8
7
|
* Assigns an explicit layer priority to a style rule.
|
|
@@ -233,6 +232,67 @@ declare function generateCSS(): string;
|
|
|
233
232
|
*/
|
|
234
233
|
type TwChainString = TwChain & string;
|
|
235
234
|
type TwUtility = ((...args: any[]) => TwChainString) & TwChainString;
|
|
235
|
+
/** @internal Token-aware utility types for autocomplete */
|
|
236
|
+
type TwColorUtility = TwUtility & {
|
|
237
|
+
[K in ColorTokenKey]: TwChainString & ((opacity: number) => TwChainString);
|
|
238
|
+
};
|
|
239
|
+
type TwColorUtilityNoOpacity = TwUtility & {
|
|
240
|
+
[K in ColorTokenKey]: TwChainString;
|
|
241
|
+
};
|
|
242
|
+
type TwRadiusUtility = TwUtility & {
|
|
243
|
+
[K in keyof RadiusTokens]: TwChainString;
|
|
244
|
+
};
|
|
245
|
+
type TwShadowUtility = TwUtility & {
|
|
246
|
+
[K in keyof ShadowTokens]: TwChainString;
|
|
247
|
+
};
|
|
248
|
+
type TwTextSizeUtility = TwUtility & {
|
|
249
|
+
[K in keyof TextSizeTokens]: TwChainString;
|
|
250
|
+
};
|
|
251
|
+
type TwFontWeightUtility = TwUtility & {
|
|
252
|
+
[K in keyof FontWeightTokens]: TwChainString;
|
|
253
|
+
};
|
|
254
|
+
type TwTrackingUtility = TwUtility & {
|
|
255
|
+
[K in keyof TrackingTokens]: TwChainString;
|
|
256
|
+
};
|
|
257
|
+
type TwLeadingUtility = TwUtility & {
|
|
258
|
+
[K in keyof LeadingTokens]: TwChainString;
|
|
259
|
+
};
|
|
260
|
+
type TwFontFamilyUtility = TwUtility & {
|
|
261
|
+
[K in keyof FontFamilyTokens]: TwChainString;
|
|
262
|
+
};
|
|
263
|
+
type TwAlignItemsUtility = TwUtility & {
|
|
264
|
+
[K in keyof AlignItemsTokens]: TwChainString;
|
|
265
|
+
};
|
|
266
|
+
type TwJustifyUtility = TwUtility & {
|
|
267
|
+
[K in keyof JustifyTokens]: TwChainString;
|
|
268
|
+
};
|
|
269
|
+
type TwDisplayUtility = TwUtility & {
|
|
270
|
+
[K in keyof DisplayTokens]: TwChainString;
|
|
271
|
+
};
|
|
272
|
+
type TwOverflowUtility = TwUtility & {
|
|
273
|
+
[K in keyof OverflowTokens]: TwChainString;
|
|
274
|
+
};
|
|
275
|
+
type TwCursorUtility = TwUtility & {
|
|
276
|
+
[K in keyof CursorTokens]: TwChainString;
|
|
277
|
+
};
|
|
278
|
+
type TwTextAlignUtility = TwUtility & {
|
|
279
|
+
[K in keyof TextAlignTokens]: TwChainString;
|
|
280
|
+
};
|
|
281
|
+
type TwObjectFitUtility = TwUtility & {
|
|
282
|
+
[K in keyof ObjectFitTokens]: TwChainString;
|
|
283
|
+
};
|
|
284
|
+
type TwSelfUtility = TwUtility & {
|
|
285
|
+
[K in keyof SelfTokens]: TwChainString;
|
|
286
|
+
};
|
|
287
|
+
type TwTextWrapUtility = TwUtility & {
|
|
288
|
+
[K in keyof TextWrapTokens]: TwChainString;
|
|
289
|
+
};
|
|
290
|
+
type TwTextOverflowUtility = TwUtility & {
|
|
291
|
+
[K in keyof TextOverflowTokens]: TwChainString;
|
|
292
|
+
};
|
|
293
|
+
type TwTextTransformUtility = TwUtility & {
|
|
294
|
+
[K in keyof TextTransformTokens]: TwChainString;
|
|
295
|
+
};
|
|
236
296
|
/** @internal A modifier usable as a property (`tw.hover.bg(…)`) or function (`tw.hover(tw.bg(…))`). */
|
|
237
297
|
type TwModifier = TwChainString & ((...chains: (TwChain | string)[]) => TwChainString);
|
|
238
298
|
/** @internal A parameterized modifier that requires arguments before it becomes a modifier. */
|
|
@@ -286,27 +346,27 @@ interface TwChain {
|
|
|
286
346
|
readonly me: TwUtility;
|
|
287
347
|
readonly spaceX: TwUtility;
|
|
288
348
|
readonly spaceY: TwUtility;
|
|
289
|
-
readonly bg:
|
|
290
|
-
readonly textColor:
|
|
291
|
-
readonly borderColor:
|
|
292
|
-
readonly text:
|
|
293
|
-
readonly font:
|
|
294
|
-
readonly tracking:
|
|
295
|
-
readonly leading:
|
|
296
|
-
readonly textAlign:
|
|
297
|
-
readonly fontFamily:
|
|
349
|
+
readonly bg: TwColorUtility;
|
|
350
|
+
readonly textColor: TwColorUtility;
|
|
351
|
+
readonly borderColor: TwColorUtility;
|
|
352
|
+
readonly text: TwTextSizeUtility;
|
|
353
|
+
readonly font: TwFontWeightUtility;
|
|
354
|
+
readonly tracking: TwTrackingUtility;
|
|
355
|
+
readonly leading: TwLeadingUtility;
|
|
356
|
+
readonly textAlign: TwTextAlignUtility;
|
|
357
|
+
readonly fontFamily: TwFontFamilyUtility;
|
|
298
358
|
readonly lineClamp: TwUtility;
|
|
299
359
|
readonly listStyleImage: TwUtility;
|
|
300
360
|
readonly listStylePosition: TwUtility;
|
|
301
361
|
readonly listStyleType: TwUtility;
|
|
302
362
|
readonly textDecoration: TwUtility;
|
|
303
|
-
readonly textDecorationColor:
|
|
363
|
+
readonly textDecorationColor: TwColorUtility;
|
|
304
364
|
readonly textDecorationStyle: TwUtility;
|
|
305
365
|
readonly textDecorationThickness: TwUtility;
|
|
306
366
|
readonly textUnderlineOffset: TwUtility;
|
|
307
|
-
readonly textTransform:
|
|
308
|
-
readonly textOverflow:
|
|
309
|
-
readonly textWrap:
|
|
367
|
+
readonly textTransform: TwTextTransformUtility;
|
|
368
|
+
readonly textOverflow: TwTextOverflowUtility;
|
|
369
|
+
readonly textWrap: TwTextWrapUtility;
|
|
310
370
|
readonly textIndent: TwUtility;
|
|
311
371
|
readonly verticalAlign: TwUtility;
|
|
312
372
|
readonly whitespace: TwUtility;
|
|
@@ -323,13 +383,13 @@ interface TwChain {
|
|
|
323
383
|
readonly minH: TwUtility;
|
|
324
384
|
readonly maxW: TwUtility;
|
|
325
385
|
readonly maxH: TwUtility;
|
|
326
|
-
readonly display:
|
|
327
|
-
readonly items:
|
|
328
|
-
readonly justify:
|
|
329
|
-
readonly self:
|
|
330
|
-
readonly overflow:
|
|
331
|
-
readonly overflowX:
|
|
332
|
-
readonly overflowY:
|
|
386
|
+
readonly display: TwDisplayUtility;
|
|
387
|
+
readonly items: TwAlignItemsUtility;
|
|
388
|
+
readonly justify: TwJustifyUtility;
|
|
389
|
+
readonly self: TwSelfUtility;
|
|
390
|
+
readonly overflow: TwOverflowUtility;
|
|
391
|
+
readonly overflowX: TwOverflowUtility;
|
|
392
|
+
readonly overflowY: TwOverflowUtility;
|
|
333
393
|
readonly top: TwUtility;
|
|
334
394
|
readonly right: TwUtility;
|
|
335
395
|
readonly bottom: TwUtility;
|
|
@@ -345,7 +405,7 @@ interface TwChain {
|
|
|
345
405
|
readonly boxSizing: TwUtility;
|
|
346
406
|
readonly float: TwUtility;
|
|
347
407
|
readonly clear: TwUtility;
|
|
348
|
-
readonly objectFit:
|
|
408
|
+
readonly objectFit: TwObjectFitUtility;
|
|
349
409
|
readonly objectPosition: TwUtility;
|
|
350
410
|
readonly overscrollBehavior: TwUtility;
|
|
351
411
|
readonly overscrollX: TwUtility;
|
|
@@ -373,19 +433,19 @@ interface TwChain {
|
|
|
373
433
|
readonly placeContent: TwUtility;
|
|
374
434
|
readonly placeItems: TwUtility;
|
|
375
435
|
readonly placeSelf: TwUtility;
|
|
376
|
-
readonly rounded:
|
|
377
|
-
readonly roundedT:
|
|
378
|
-
readonly roundedB:
|
|
379
|
-
readonly roundedL:
|
|
380
|
-
readonly roundedR:
|
|
381
|
-
readonly roundedTL:
|
|
382
|
-
readonly roundedTR:
|
|
383
|
-
readonly roundedBR:
|
|
384
|
-
readonly roundedBL:
|
|
385
|
-
readonly roundedSS:
|
|
386
|
-
readonly roundedSE:
|
|
387
|
-
readonly roundedEE:
|
|
388
|
-
readonly roundedES:
|
|
436
|
+
readonly rounded: TwRadiusUtility;
|
|
437
|
+
readonly roundedT: TwRadiusUtility;
|
|
438
|
+
readonly roundedB: TwRadiusUtility;
|
|
439
|
+
readonly roundedL: TwRadiusUtility;
|
|
440
|
+
readonly roundedR: TwRadiusUtility;
|
|
441
|
+
readonly roundedTL: TwRadiusUtility;
|
|
442
|
+
readonly roundedTR: TwRadiusUtility;
|
|
443
|
+
readonly roundedBR: TwRadiusUtility;
|
|
444
|
+
readonly roundedBL: TwRadiusUtility;
|
|
445
|
+
readonly roundedSS: TwRadiusUtility;
|
|
446
|
+
readonly roundedSE: TwRadiusUtility;
|
|
447
|
+
readonly roundedEE: TwRadiusUtility;
|
|
448
|
+
readonly roundedES: TwRadiusUtility;
|
|
389
449
|
readonly border: TwUtility;
|
|
390
450
|
readonly borderT: TwUtility;
|
|
391
451
|
readonly borderR: TwUtility;
|
|
@@ -397,30 +457,30 @@ interface TwChain {
|
|
|
397
457
|
readonly borderE: TwUtility;
|
|
398
458
|
readonly borderStyle: TwUtility;
|
|
399
459
|
readonly ring: TwUtility;
|
|
400
|
-
readonly ringColor:
|
|
460
|
+
readonly ringColor: TwColorUtility;
|
|
401
461
|
readonly ringOffsetWidth: TwUtility;
|
|
402
462
|
readonly ringOffsetColor: TwUtility;
|
|
403
463
|
readonly outlineWidth: TwUtility;
|
|
404
|
-
readonly outlineColor:
|
|
464
|
+
readonly outlineColor: TwColorUtility;
|
|
405
465
|
readonly outlineStyle: TwUtility;
|
|
406
466
|
readonly outlineOffset: TwUtility;
|
|
407
467
|
readonly outline: TwUtility;
|
|
408
468
|
readonly divideX: TwUtility;
|
|
409
469
|
readonly divideY: TwUtility;
|
|
410
|
-
readonly divideColor:
|
|
470
|
+
readonly divideColor: TwColorUtility;
|
|
411
471
|
readonly divideStyle: TwUtility;
|
|
412
|
-
readonly shadow:
|
|
472
|
+
readonly shadow: TwShadowUtility;
|
|
413
473
|
readonly opacity: TwUtility;
|
|
414
474
|
readonly backdrop: TwUtility;
|
|
415
|
-
readonly shadowColor:
|
|
475
|
+
readonly shadowColor: TwColorUtility;
|
|
416
476
|
readonly mixBlendMode: TwUtility;
|
|
417
477
|
readonly bgBlendMode: TwUtility;
|
|
418
|
-
readonly cursor:
|
|
478
|
+
readonly cursor: TwCursorUtility;
|
|
419
479
|
readonly select: TwUtility;
|
|
420
480
|
readonly pointerEvents: TwUtility;
|
|
421
|
-
readonly accentColor:
|
|
481
|
+
readonly accentColor: TwColorUtility;
|
|
422
482
|
readonly appearance: TwUtility;
|
|
423
|
-
readonly caretColor:
|
|
483
|
+
readonly caretColor: TwColorUtility;
|
|
424
484
|
readonly resize: TwUtility;
|
|
425
485
|
readonly scrollBehavior: TwUtility;
|
|
426
486
|
readonly scrollMargin: TwUtility;
|
|
@@ -491,9 +551,9 @@ interface TwChain {
|
|
|
491
551
|
readonly bgSize: TwUtility;
|
|
492
552
|
readonly bgImage: TwUtility;
|
|
493
553
|
readonly bgGradient: TwUtility;
|
|
494
|
-
readonly gradientFrom:
|
|
495
|
-
readonly gradientVia:
|
|
496
|
-
readonly gradientTo:
|
|
554
|
+
readonly gradientFrom: TwColorUtilityNoOpacity;
|
|
555
|
+
readonly gradientVia: TwColorUtilityNoOpacity;
|
|
556
|
+
readonly gradientTo: TwColorUtilityNoOpacity;
|
|
497
557
|
readonly flex: TwChainString;
|
|
498
558
|
readonly flexCol: TwChainString;
|
|
499
559
|
readonly flexRow: TwChainString;
|
|
@@ -518,6 +578,7 @@ interface TwChain {
|
|
|
518
578
|
readonly flexAuto: TwChainString;
|
|
519
579
|
readonly flexInitial: TwChainString;
|
|
520
580
|
readonly flexNone: TwChainString;
|
|
581
|
+
readonly bold: TwChainString;
|
|
521
582
|
readonly antialiased: TwChainString;
|
|
522
583
|
readonly subpixelAntialiased: TwChainString;
|
|
523
584
|
readonly italic: TwChainString;
|
|
@@ -1305,260 +1366,6 @@ declare function spaceY(value: number | string | DynamicValue): StyleRule;
|
|
|
1305
1366
|
declare function spaceXReverse(): StyleRule;
|
|
1306
1367
|
declare function spaceYReverse(): StyleRule;
|
|
1307
1368
|
|
|
1308
|
-
/**
|
|
1309
|
-
* Sets the background color of an element.
|
|
1310
|
-
*
|
|
1311
|
-
* Accepts a raw CSS color string or a {@link DynamicValue} for runtime values.
|
|
1312
|
-
*
|
|
1313
|
-
* @param color - CSS color string (e.g. `'#3b82f6'`, `'red'`, `'rgb(59, 130, 246)'`) or `dynamic()` value.
|
|
1314
|
-
* @returns A {@link StyleRule} that sets `background-color`.
|
|
1315
|
-
*
|
|
1316
|
-
* @example CSS color string
|
|
1317
|
-
* ```ts
|
|
1318
|
-
* import { cx, bg } from 'typewritingclass'
|
|
1319
|
-
*
|
|
1320
|
-
* cx(bg('#3b82f6'))
|
|
1321
|
-
* // CSS: background-color: #3b82f6;
|
|
1322
|
-
* ```
|
|
1323
|
-
*
|
|
1324
|
-
* @example Named color
|
|
1325
|
-
* ```ts
|
|
1326
|
-
* cx(bg('transparent'))
|
|
1327
|
-
* // CSS: background-color: transparent;
|
|
1328
|
-
* ```
|
|
1329
|
-
*
|
|
1330
|
-
* @example Dynamic value
|
|
1331
|
-
* ```ts
|
|
1332
|
-
* import { dcx, bg, dynamic } from 'typewritingclass'
|
|
1333
|
-
*
|
|
1334
|
-
* const { className, style } = dcx(bg(dynamic(themeColor)))
|
|
1335
|
-
* // CSS: background-color: var(--twc-d0);
|
|
1336
|
-
* // style: { '--twc-d0': themeColor }
|
|
1337
|
-
* ```
|
|
1338
|
-
*/
|
|
1339
|
-
declare function bg(color: string | DynamicValue): StyleRule;
|
|
1340
|
-
/**
|
|
1341
|
-
* Sets the text color of an element.
|
|
1342
|
-
*
|
|
1343
|
-
* Accepts a raw CSS color string or a {@link DynamicValue} for runtime values.
|
|
1344
|
-
*
|
|
1345
|
-
* @param color - CSS color string (e.g. `'#111827'`, `'white'`, `'rgb(17, 24, 39)'`) or `dynamic()` value.
|
|
1346
|
-
* @returns A {@link StyleRule} that sets `color`.
|
|
1347
|
-
*
|
|
1348
|
-
* @example CSS color string
|
|
1349
|
-
* ```ts
|
|
1350
|
-
* import { cx, textColor } from 'typewritingclass'
|
|
1351
|
-
*
|
|
1352
|
-
* cx(textColor('#111827'))
|
|
1353
|
-
* // CSS: color: #111827;
|
|
1354
|
-
* ```
|
|
1355
|
-
*
|
|
1356
|
-
* @example Named color
|
|
1357
|
-
* ```ts
|
|
1358
|
-
* cx(textColor('inherit'))
|
|
1359
|
-
* // CSS: color: inherit;
|
|
1360
|
-
* ```
|
|
1361
|
-
*
|
|
1362
|
-
* @example Dynamic value
|
|
1363
|
-
* ```ts
|
|
1364
|
-
* import { dcx, textColor, dynamic } from 'typewritingclass'
|
|
1365
|
-
*
|
|
1366
|
-
* const { className, style } = dcx(textColor(dynamic(themeColor)))
|
|
1367
|
-
* // CSS: color: var(--twc-d0);
|
|
1368
|
-
* // style: { '--twc-d0': themeColor }
|
|
1369
|
-
* ```
|
|
1370
|
-
*/
|
|
1371
|
-
declare function textColor(color: string | DynamicValue): StyleRule;
|
|
1372
|
-
/**
|
|
1373
|
-
* Sets the border color of an element.
|
|
1374
|
-
*
|
|
1375
|
-
* Accepts a raw CSS color string or a {@link DynamicValue} for runtime values.
|
|
1376
|
-
*
|
|
1377
|
-
* @param color - CSS color string (e.g. `'#e5e7eb'`, `'red'`, `'rgb(229, 231, 235)'`) or `dynamic()` value.
|
|
1378
|
-
* @returns A {@link StyleRule} that sets `border-color`.
|
|
1379
|
-
*
|
|
1380
|
-
* @example CSS color string
|
|
1381
|
-
* ```ts
|
|
1382
|
-
* import { cx, borderColor } from 'typewritingclass'
|
|
1383
|
-
*
|
|
1384
|
-
* cx(borderColor('#e5e7eb'))
|
|
1385
|
-
* // CSS: border-color: #e5e7eb;
|
|
1386
|
-
* ```
|
|
1387
|
-
*
|
|
1388
|
-
* @example Named color
|
|
1389
|
-
* ```ts
|
|
1390
|
-
* cx(borderColor('currentColor'))
|
|
1391
|
-
* // CSS: border-color: currentColor;
|
|
1392
|
-
* ```
|
|
1393
|
-
*
|
|
1394
|
-
* @example Dynamic value
|
|
1395
|
-
* ```ts
|
|
1396
|
-
* import { dcx, borderColor, dynamic } from 'typewritingclass'
|
|
1397
|
-
*
|
|
1398
|
-
* const { className, style } = dcx(borderColor(dynamic(themeColor)))
|
|
1399
|
-
* // CSS: border-color: var(--twc-d0);
|
|
1400
|
-
* // style: { '--twc-d0': themeColor }
|
|
1401
|
-
* ```
|
|
1402
|
-
*/
|
|
1403
|
-
declare function borderColor(color: string | DynamicValue): StyleRule;
|
|
1404
|
-
|
|
1405
|
-
/**
|
|
1406
|
-
* Sets the font size (and optionally line height) of an element.
|
|
1407
|
-
*
|
|
1408
|
-
* Accepts a {@link TextSize} object from the typography theme (which sets both
|
|
1409
|
-
* `font-size` and `line-height`), a raw CSS string for `font-size` only,
|
|
1410
|
-
* or a {@link DynamicValue} for runtime values.
|
|
1411
|
-
*
|
|
1412
|
-
* @param size - A {@link TextSize} preset (e.g. `typography.base`), a raw CSS string (`'1.5rem'`), or `dynamic()` value.
|
|
1413
|
-
* @returns A {@link StyleRule} that sets `font-size` and optionally `line-height`.
|
|
1414
|
-
*
|
|
1415
|
-
* @example TextSize preset
|
|
1416
|
-
* ```ts
|
|
1417
|
-
* import { cx, text } from 'typewritingclass'
|
|
1418
|
-
* import * as typography from 'typewritingclass/theme/typography'
|
|
1419
|
-
*
|
|
1420
|
-
* cx(text(typography.lg))
|
|
1421
|
-
* // CSS: font-size: 1.125rem; line-height: 1.75rem;
|
|
1422
|
-
* ```
|
|
1423
|
-
*
|
|
1424
|
-
* @example Raw value
|
|
1425
|
-
* ```ts
|
|
1426
|
-
* cx(text('2rem'))
|
|
1427
|
-
* // CSS: font-size: 2rem;
|
|
1428
|
-
* ```
|
|
1429
|
-
*
|
|
1430
|
-
* @example Dynamic value
|
|
1431
|
-
* ```ts
|
|
1432
|
-
* import { dcx, text, dynamic } from 'typewritingclass'
|
|
1433
|
-
*
|
|
1434
|
-
* const { className, style } = dcx(text(dynamic(fontSize)))
|
|
1435
|
-
* // CSS: font-size: var(--twc-d0);
|
|
1436
|
-
* // style: { '--twc-d0': fontSize }
|
|
1437
|
-
* ```
|
|
1438
|
-
*/
|
|
1439
|
-
declare function text(size: TextSize | string | DynamicValue): StyleRule;
|
|
1440
|
-
/**
|
|
1441
|
-
* Sets the font weight of an element.
|
|
1442
|
-
*
|
|
1443
|
-
* Accepts a raw CSS font-weight string or a {@link DynamicValue} for runtime values.
|
|
1444
|
-
* Use the typography theme exports (e.g. `typography.bold`) for standard weights.
|
|
1445
|
-
*
|
|
1446
|
-
* @param weight - A font-weight string (`'700'`, `'bold'`) or `dynamic()` value.
|
|
1447
|
-
* @returns A {@link StyleRule} that sets `font-weight`.
|
|
1448
|
-
*
|
|
1449
|
-
* @example Typography theme weight
|
|
1450
|
-
* ```ts
|
|
1451
|
-
* import { cx, font } from 'typewritingclass'
|
|
1452
|
-
* import * as typography from 'typewritingclass/theme/typography'
|
|
1453
|
-
*
|
|
1454
|
-
* cx(font(typography.bold))
|
|
1455
|
-
* // CSS: font-weight: 700;
|
|
1456
|
-
* ```
|
|
1457
|
-
*
|
|
1458
|
-
* @example Raw value
|
|
1459
|
-
* ```ts
|
|
1460
|
-
* cx(font('600'))
|
|
1461
|
-
* // CSS: font-weight: 600;
|
|
1462
|
-
* ```
|
|
1463
|
-
*
|
|
1464
|
-
* @example Dynamic value
|
|
1465
|
-
* ```ts
|
|
1466
|
-
* import { dcx, font, dynamic } from 'typewritingclass'
|
|
1467
|
-
*
|
|
1468
|
-
* const { className, style } = dcx(font(dynamic(weight)))
|
|
1469
|
-
* // CSS: font-weight: var(--twc-d0);
|
|
1470
|
-
* // style: { '--twc-d0': weight }
|
|
1471
|
-
* ```
|
|
1472
|
-
*/
|
|
1473
|
-
declare function font(weight: string | DynamicValue): StyleRule;
|
|
1474
|
-
/**
|
|
1475
|
-
* Sets the letter spacing (tracking) of an element.
|
|
1476
|
-
*
|
|
1477
|
-
* Accepts a raw CSS letter-spacing string or a {@link DynamicValue} for runtime values.
|
|
1478
|
-
*
|
|
1479
|
-
* @param value - A CSS letter-spacing string (`'-0.025em'`, `'0.05em'`) or `dynamic()` value.
|
|
1480
|
-
* @returns A {@link StyleRule} that sets `letter-spacing`.
|
|
1481
|
-
*
|
|
1482
|
-
* @example Raw value
|
|
1483
|
-
* ```ts
|
|
1484
|
-
* import { cx, tracking } from 'typewritingclass'
|
|
1485
|
-
*
|
|
1486
|
-
* cx(tracking('-0.025em'))
|
|
1487
|
-
* // CSS: letter-spacing: -0.025em;
|
|
1488
|
-
* ```
|
|
1489
|
-
*
|
|
1490
|
-
* @example Wide tracking
|
|
1491
|
-
* ```ts
|
|
1492
|
-
* cx(tracking('0.1em'))
|
|
1493
|
-
* // CSS: letter-spacing: 0.1em;
|
|
1494
|
-
* ```
|
|
1495
|
-
*
|
|
1496
|
-
* @example Dynamic value
|
|
1497
|
-
* ```ts
|
|
1498
|
-
* import { dcx, tracking, dynamic } from 'typewritingclass'
|
|
1499
|
-
*
|
|
1500
|
-
* const { className, style } = dcx(tracking(dynamic(letterSpacing)))
|
|
1501
|
-
* // CSS: letter-spacing: var(--twc-d0);
|
|
1502
|
-
* // style: { '--twc-d0': letterSpacing }
|
|
1503
|
-
* ```
|
|
1504
|
-
*/
|
|
1505
|
-
declare function tracking(value: string | DynamicValue): StyleRule;
|
|
1506
|
-
/**
|
|
1507
|
-
* Sets the line height (leading) of an element.
|
|
1508
|
-
*
|
|
1509
|
-
* Accepts a raw CSS line-height string or a {@link DynamicValue} for runtime values.
|
|
1510
|
-
*
|
|
1511
|
-
* @param value - A CSS line-height string (`'1.5'`, `'2rem'`) or `dynamic()` value.
|
|
1512
|
-
* @returns A {@link StyleRule} that sets `line-height`.
|
|
1513
|
-
*
|
|
1514
|
-
* @example Unitless ratio
|
|
1515
|
-
* ```ts
|
|
1516
|
-
* import { cx, leading } from 'typewritingclass'
|
|
1517
|
-
*
|
|
1518
|
-
* cx(leading('1.5'))
|
|
1519
|
-
* // CSS: line-height: 1.5;
|
|
1520
|
-
* ```
|
|
1521
|
-
*
|
|
1522
|
-
* @example Fixed value
|
|
1523
|
-
* ```ts
|
|
1524
|
-
* cx(leading('2rem'))
|
|
1525
|
-
* // CSS: line-height: 2rem;
|
|
1526
|
-
* ```
|
|
1527
|
-
*
|
|
1528
|
-
* @example Dynamic value
|
|
1529
|
-
* ```ts
|
|
1530
|
-
* import { dcx, leading, dynamic } from 'typewritingclass'
|
|
1531
|
-
*
|
|
1532
|
-
* const { className, style } = dcx(leading(dynamic(lineHeight)))
|
|
1533
|
-
* // CSS: line-height: var(--twc-d0);
|
|
1534
|
-
* // style: { '--twc-d0': lineHeight }
|
|
1535
|
-
* ```
|
|
1536
|
-
*/
|
|
1537
|
-
declare function leading(value: string | number | DynamicValue): StyleRule;
|
|
1538
|
-
/**
|
|
1539
|
-
* Sets the text alignment of an element.
|
|
1540
|
-
*
|
|
1541
|
-
* Accepts a raw CSS text-align string.
|
|
1542
|
-
*
|
|
1543
|
-
* @param value - A CSS text-align value (`'left'`, `'center'`, `'right'`, `'justify'`).
|
|
1544
|
-
* @returns A {@link StyleRule} that sets `text-align`.
|
|
1545
|
-
*
|
|
1546
|
-
* @example Center alignment
|
|
1547
|
-
* ```ts
|
|
1548
|
-
* import { cx, textAlign } from 'typewritingclass'
|
|
1549
|
-
*
|
|
1550
|
-
* cx(textAlign('center'))
|
|
1551
|
-
* // CSS: text-align: center;
|
|
1552
|
-
* ```
|
|
1553
|
-
*
|
|
1554
|
-
* @example Right alignment
|
|
1555
|
-
* ```ts
|
|
1556
|
-
* cx(textAlign('right'))
|
|
1557
|
-
* // CSS: text-align: right;
|
|
1558
|
-
* ```
|
|
1559
|
-
*/
|
|
1560
|
-
declare function textAlign(value: string): StyleRule;
|
|
1561
|
-
declare function fontFamily(value: string | DynamicValue): StyleRule;
|
|
1562
1369
|
declare function antialiased(): StyleRule;
|
|
1563
1370
|
declare function subpixelAntialiased(): StyleRule;
|
|
1564
1371
|
declare function italic(): StyleRule;
|
|
@@ -1577,13 +1384,9 @@ declare function listStyleImage(value: string): StyleRule;
|
|
|
1577
1384
|
declare function listStylePosition(value: string): StyleRule;
|
|
1578
1385
|
declare function listStyleType(value: string): StyleRule;
|
|
1579
1386
|
declare function textDecoration(value: string): StyleRule;
|
|
1580
|
-
declare function textDecorationColor(value: string | DynamicValue): StyleRule;
|
|
1581
1387
|
declare function textDecorationStyle(value: string): StyleRule;
|
|
1582
1388
|
declare function textDecorationThickness(value: string | DynamicValue): StyleRule;
|
|
1583
1389
|
declare function textUnderlineOffset(value: string | DynamicValue): StyleRule;
|
|
1584
|
-
declare function textTransform(value: string): StyleRule;
|
|
1585
|
-
declare function textOverflow(value: string): StyleRule;
|
|
1586
|
-
declare function textWrap(value: string): StyleRule;
|
|
1587
1390
|
declare function textIndent(value: string | DynamicValue): StyleRule;
|
|
1588
1391
|
declare function verticalAlign(value: string): StyleRule;
|
|
1589
1392
|
declare function whitespace(value: string): StyleRule;
|
|
@@ -1957,167 +1760,6 @@ declare function maxW(value: number | string | DynamicValue): StyleRule;
|
|
|
1957
1760
|
* ```
|
|
1958
1761
|
*/
|
|
1959
1762
|
declare function maxH(value: number | string | DynamicValue): StyleRule;
|
|
1960
|
-
/**
|
|
1961
|
-
* Sets the CSS `display` property of an element.
|
|
1962
|
-
*
|
|
1963
|
-
* Accepts any valid CSS display value as a string.
|
|
1964
|
-
*
|
|
1965
|
-
* @param value - A CSS display value (`'block'`, `'none'`, `'inline-block'`, etc.).
|
|
1966
|
-
* @returns A {@link StyleRule} that sets `display`.
|
|
1967
|
-
*
|
|
1968
|
-
* @example Block display
|
|
1969
|
-
* ```ts
|
|
1970
|
-
* import { cx, display } from 'typewritingclass'
|
|
1971
|
-
*
|
|
1972
|
-
* cx(display('block'))
|
|
1973
|
-
* // CSS: display: block;
|
|
1974
|
-
* ```
|
|
1975
|
-
*
|
|
1976
|
-
* @example Hide element
|
|
1977
|
-
* ```ts
|
|
1978
|
-
* cx(display('none'))
|
|
1979
|
-
* // CSS: display: none;
|
|
1980
|
-
* ```
|
|
1981
|
-
*/
|
|
1982
|
-
declare function display(value: string): StyleRule;
|
|
1983
|
-
/**
|
|
1984
|
-
* Sets the `align-items` property on a flex or grid container.
|
|
1985
|
-
*
|
|
1986
|
-
* Accepts any valid CSS align-items value as a string.
|
|
1987
|
-
*
|
|
1988
|
-
* @param value - A CSS align-items value (`'center'`, `'flex-start'`, `'stretch'`, etc.).
|
|
1989
|
-
* @returns A {@link StyleRule} that sets `align-items`.
|
|
1990
|
-
*
|
|
1991
|
-
* @example Center alignment
|
|
1992
|
-
* ```ts
|
|
1993
|
-
* import { cx, items } from 'typewritingclass'
|
|
1994
|
-
*
|
|
1995
|
-
* cx(items('center'))
|
|
1996
|
-
* // CSS: align-items: center;
|
|
1997
|
-
* ```
|
|
1998
|
-
*
|
|
1999
|
-
* @example Start alignment
|
|
2000
|
-
* ```ts
|
|
2001
|
-
* cx(items('flex-start'))
|
|
2002
|
-
* // CSS: align-items: flex-start;
|
|
2003
|
-
* ```
|
|
2004
|
-
*/
|
|
2005
|
-
declare function items(value: string): StyleRule;
|
|
2006
|
-
/**
|
|
2007
|
-
* Sets the `justify-content` property on a flex or grid container.
|
|
2008
|
-
*
|
|
2009
|
-
* Accepts any valid CSS justify-content value as a string.
|
|
2010
|
-
*
|
|
2011
|
-
* @param value - A CSS justify-content value (`'center'`, `'space-between'`, `'flex-end'`, etc.).
|
|
2012
|
-
* @returns A {@link StyleRule} that sets `justify-content`.
|
|
2013
|
-
*
|
|
2014
|
-
* @example Center justification
|
|
2015
|
-
* ```ts
|
|
2016
|
-
* import { cx, justify } from 'typewritingclass'
|
|
2017
|
-
*
|
|
2018
|
-
* cx(justify('center'))
|
|
2019
|
-
* // CSS: justify-content: center;
|
|
2020
|
-
* ```
|
|
2021
|
-
*
|
|
2022
|
-
* @example Space between
|
|
2023
|
-
* ```ts
|
|
2024
|
-
* cx(justify('space-between'))
|
|
2025
|
-
* // CSS: justify-content: space-between;
|
|
2026
|
-
* ```
|
|
2027
|
-
*/
|
|
2028
|
-
declare function justify(value: string): StyleRule;
|
|
2029
|
-
/**
|
|
2030
|
-
* Sets the `align-self` property on a flex or grid child.
|
|
2031
|
-
*
|
|
2032
|
-
* Accepts any valid CSS align-self value as a string.
|
|
2033
|
-
*
|
|
2034
|
-
* @param value - A CSS align-self value (`'center'`, `'flex-start'`, `'stretch'`, etc.).
|
|
2035
|
-
* @returns A {@link StyleRule} that sets `align-self`.
|
|
2036
|
-
*
|
|
2037
|
-
* @example Center self-alignment
|
|
2038
|
-
* ```ts
|
|
2039
|
-
* import { cx, self } from 'typewritingclass'
|
|
2040
|
-
*
|
|
2041
|
-
* cx(self('center'))
|
|
2042
|
-
* // CSS: align-self: center;
|
|
2043
|
-
* ```
|
|
2044
|
-
*
|
|
2045
|
-
* @example End self-alignment
|
|
2046
|
-
* ```ts
|
|
2047
|
-
* cx(self('flex-end'))
|
|
2048
|
-
* // CSS: align-self: flex-end;
|
|
2049
|
-
* ```
|
|
2050
|
-
*/
|
|
2051
|
-
declare function self(value: string): StyleRule;
|
|
2052
|
-
/**
|
|
2053
|
-
* Sets the `overflow` behavior on both axes of an element.
|
|
2054
|
-
*
|
|
2055
|
-
* Accepts any valid CSS overflow value as a string.
|
|
2056
|
-
*
|
|
2057
|
-
* @param value - A CSS overflow value (`'hidden'`, `'auto'`, `'scroll'`, `'visible'`).
|
|
2058
|
-
* @returns A {@link StyleRule} that sets `overflow`.
|
|
2059
|
-
*
|
|
2060
|
-
* @example Hidden overflow
|
|
2061
|
-
* ```ts
|
|
2062
|
-
* import { cx, overflow } from 'typewritingclass'
|
|
2063
|
-
*
|
|
2064
|
-
* cx(overflow('hidden'))
|
|
2065
|
-
* // CSS: overflow: hidden;
|
|
2066
|
-
* ```
|
|
2067
|
-
*
|
|
2068
|
-
* @example Auto overflow
|
|
2069
|
-
* ```ts
|
|
2070
|
-
* cx(overflow('auto'))
|
|
2071
|
-
* // CSS: overflow: auto;
|
|
2072
|
-
* ```
|
|
2073
|
-
*/
|
|
2074
|
-
declare function overflow(value: string): StyleRule;
|
|
2075
|
-
/**
|
|
2076
|
-
* Sets the horizontal overflow behavior of an element.
|
|
2077
|
-
*
|
|
2078
|
-
* Accepts any valid CSS overflow-x value as a string.
|
|
2079
|
-
*
|
|
2080
|
-
* @param value - A CSS overflow-x value (`'hidden'`, `'auto'`, `'scroll'`, `'visible'`).
|
|
2081
|
-
* @returns A {@link StyleRule} that sets `overflow-x`.
|
|
2082
|
-
*
|
|
2083
|
-
* @example Auto horizontal scroll
|
|
2084
|
-
* ```ts
|
|
2085
|
-
* import { cx, overflowX } from 'typewritingclass'
|
|
2086
|
-
*
|
|
2087
|
-
* cx(overflowX('auto'))
|
|
2088
|
-
* // CSS: overflow-x: auto;
|
|
2089
|
-
* ```
|
|
2090
|
-
*
|
|
2091
|
-
* @example Hidden horizontal overflow
|
|
2092
|
-
* ```ts
|
|
2093
|
-
* cx(overflowX('hidden'))
|
|
2094
|
-
* // CSS: overflow-x: hidden;
|
|
2095
|
-
* ```
|
|
2096
|
-
*/
|
|
2097
|
-
declare function overflowX(value: string): StyleRule;
|
|
2098
|
-
/**
|
|
2099
|
-
* Sets the vertical overflow behavior of an element.
|
|
2100
|
-
*
|
|
2101
|
-
* Accepts any valid CSS overflow-y value as a string.
|
|
2102
|
-
*
|
|
2103
|
-
* @param value - A CSS overflow-y value (`'hidden'`, `'auto'`, `'scroll'`, `'visible'`).
|
|
2104
|
-
* @returns A {@link StyleRule} that sets `overflow-y`.
|
|
2105
|
-
*
|
|
2106
|
-
* @example Scrollable vertical overflow
|
|
2107
|
-
* ```ts
|
|
2108
|
-
* import { cx, overflowY } from 'typewritingclass'
|
|
2109
|
-
*
|
|
2110
|
-
* cx(overflowY('scroll'))
|
|
2111
|
-
* // CSS: overflow-y: scroll;
|
|
2112
|
-
* ```
|
|
2113
|
-
*
|
|
2114
|
-
* @example Hidden vertical overflow
|
|
2115
|
-
* ```ts
|
|
2116
|
-
* cx(overflowY('hidden'))
|
|
2117
|
-
* // CSS: overflow-y: hidden;
|
|
2118
|
-
* ```
|
|
2119
|
-
*/
|
|
2120
|
-
declare function overflowY(value: string): StyleRule;
|
|
2121
1763
|
/**
|
|
2122
1764
|
* Sets the element to `position: relative`.
|
|
2123
1765
|
*
|
|
@@ -2394,7 +2036,6 @@ declare function float_(value: string): StyleRule;
|
|
|
2394
2036
|
declare function clear_(value: string): StyleRule;
|
|
2395
2037
|
declare function isolate(): StyleRule;
|
|
2396
2038
|
declare function isolationAuto(): StyleRule;
|
|
2397
|
-
declare function objectFit(value: string): StyleRule;
|
|
2398
2039
|
declare function objectPosition(value: string): StyleRule;
|
|
2399
2040
|
declare function overscrollBehavior(value: string): StyleRule;
|
|
2400
2041
|
declare function overscrollX(value: string): StyleRule;
|
|
@@ -2436,177 +2077,6 @@ declare function placeItems(value: string): StyleRule;
|
|
|
2436
2077
|
declare function placeSelf(value: string): StyleRule;
|
|
2437
2078
|
declare function container(): StyleRule;
|
|
2438
2079
|
|
|
2439
|
-
/**
|
|
2440
|
-
* Sets the `border-radius` on all corners of an element.
|
|
2441
|
-
*
|
|
2442
|
-
* When called without arguments, uses the default border radius (`0.25rem`).
|
|
2443
|
-
* Accepts an optional raw CSS string or a {@link DynamicValue} for runtime values.
|
|
2444
|
-
*
|
|
2445
|
-
* @param value - Optional CSS border-radius string (`'0.5rem'`, `'9999px'`) or `dynamic()` value. Defaults to `'0.25rem'`.
|
|
2446
|
-
* @returns A {@link StyleRule} that sets `border-radius`.
|
|
2447
|
-
*
|
|
2448
|
-
* @example Default radius
|
|
2449
|
-
* ```ts
|
|
2450
|
-
* import { cx, rounded } from 'typewritingclass'
|
|
2451
|
-
*
|
|
2452
|
-
* cx(rounded())
|
|
2453
|
-
* // CSS: border-radius: 0.25rem;
|
|
2454
|
-
* ```
|
|
2455
|
-
*
|
|
2456
|
-
* @example Custom radius
|
|
2457
|
-
* ```ts
|
|
2458
|
-
* cx(rounded('0.5rem'))
|
|
2459
|
-
* // CSS: border-radius: 0.5rem;
|
|
2460
|
-
* ```
|
|
2461
|
-
*
|
|
2462
|
-
* @example Full rounding (pill shape)
|
|
2463
|
-
* ```ts
|
|
2464
|
-
* cx(rounded('9999px'))
|
|
2465
|
-
* // CSS: border-radius: 9999px;
|
|
2466
|
-
* ```
|
|
2467
|
-
*
|
|
2468
|
-
* @example Dynamic value
|
|
2469
|
-
* ```ts
|
|
2470
|
-
* import { dcx, rounded, dynamic } from 'typewritingclass'
|
|
2471
|
-
*
|
|
2472
|
-
* const { className, style } = dcx(rounded(dynamic(radius)))
|
|
2473
|
-
* // CSS: border-radius: var(--twc-d0);
|
|
2474
|
-
* // style: { '--twc-d0': radius }
|
|
2475
|
-
* ```
|
|
2476
|
-
*/
|
|
2477
|
-
declare function rounded(value?: string | DynamicValue): StyleRule;
|
|
2478
|
-
/**
|
|
2479
|
-
* Sets the `border-radius` on the top-left and top-right corners of an element.
|
|
2480
|
-
*
|
|
2481
|
-
* When called without arguments, uses the default border radius (`0.25rem`).
|
|
2482
|
-
* Accepts an optional raw CSS string or a {@link DynamicValue} for runtime values.
|
|
2483
|
-
*
|
|
2484
|
-
* @param value - Optional CSS border-radius string (`'0.5rem'`) or `dynamic()` value. Defaults to `'0.25rem'`.
|
|
2485
|
-
* @returns A {@link StyleRule} that sets `border-top-left-radius` and `border-top-right-radius`.
|
|
2486
|
-
*
|
|
2487
|
-
* @example Default radius
|
|
2488
|
-
* ```ts
|
|
2489
|
-
* import { cx, roundedT } from 'typewritingclass'
|
|
2490
|
-
*
|
|
2491
|
-
* cx(roundedT())
|
|
2492
|
-
* // CSS: border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem;
|
|
2493
|
-
* ```
|
|
2494
|
-
*
|
|
2495
|
-
* @example Custom radius
|
|
2496
|
-
* ```ts
|
|
2497
|
-
* cx(roundedT('1rem'))
|
|
2498
|
-
* // CSS: border-top-left-radius: 1rem; border-top-right-radius: 1rem;
|
|
2499
|
-
* ```
|
|
2500
|
-
*
|
|
2501
|
-
* @example Dynamic value
|
|
2502
|
-
* ```ts
|
|
2503
|
-
* import { dcx, roundedT, dynamic } from 'typewritingclass'
|
|
2504
|
-
*
|
|
2505
|
-
* const { className, style } = dcx(roundedT(dynamic(radius)))
|
|
2506
|
-
* // CSS: border-top-left-radius: var(--twc-d0); border-top-right-radius: var(--twc-d0);
|
|
2507
|
-
* // style: { '--twc-d0': radius }
|
|
2508
|
-
* ```
|
|
2509
|
-
*/
|
|
2510
|
-
declare function roundedT(value?: string | DynamicValue): StyleRule;
|
|
2511
|
-
/**
|
|
2512
|
-
* Sets the `border-radius` on the bottom-left and bottom-right corners of an element.
|
|
2513
|
-
*
|
|
2514
|
-
* When called without arguments, uses the default border radius (`0.25rem`).
|
|
2515
|
-
* Accepts an optional raw CSS string or a {@link DynamicValue} for runtime values.
|
|
2516
|
-
*
|
|
2517
|
-
* @param value - Optional CSS border-radius string (`'0.5rem'`) or `dynamic()` value. Defaults to `'0.25rem'`.
|
|
2518
|
-
* @returns A {@link StyleRule} that sets `border-bottom-left-radius` and `border-bottom-right-radius`.
|
|
2519
|
-
*
|
|
2520
|
-
* @example Default radius
|
|
2521
|
-
* ```ts
|
|
2522
|
-
* import { cx, roundedB } from 'typewritingclass'
|
|
2523
|
-
*
|
|
2524
|
-
* cx(roundedB())
|
|
2525
|
-
* // CSS: border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem;
|
|
2526
|
-
* ```
|
|
2527
|
-
*
|
|
2528
|
-
* @example Custom radius
|
|
2529
|
-
* ```ts
|
|
2530
|
-
* cx(roundedB('1rem'))
|
|
2531
|
-
* // CSS: border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem;
|
|
2532
|
-
* ```
|
|
2533
|
-
*
|
|
2534
|
-
* @example Dynamic value
|
|
2535
|
-
* ```ts
|
|
2536
|
-
* import { dcx, roundedB, dynamic } from 'typewritingclass'
|
|
2537
|
-
*
|
|
2538
|
-
* const { className, style } = dcx(roundedB(dynamic(radius)))
|
|
2539
|
-
* // CSS: border-bottom-left-radius: var(--twc-d0); border-bottom-right-radius: var(--twc-d0);
|
|
2540
|
-
* // style: { '--twc-d0': radius }
|
|
2541
|
-
* ```
|
|
2542
|
-
*/
|
|
2543
|
-
declare function roundedB(value?: string | DynamicValue): StyleRule;
|
|
2544
|
-
/**
|
|
2545
|
-
* Sets the `border-radius` on the top-left and bottom-left corners of an element.
|
|
2546
|
-
*
|
|
2547
|
-
* When called without arguments, uses the default border radius (`0.25rem`).
|
|
2548
|
-
* Accepts an optional raw CSS string or a {@link DynamicValue} for runtime values.
|
|
2549
|
-
*
|
|
2550
|
-
* @param value - Optional CSS border-radius string (`'0.5rem'`) or `dynamic()` value. Defaults to `'0.25rem'`.
|
|
2551
|
-
* @returns A {@link StyleRule} that sets `border-top-left-radius` and `border-bottom-left-radius`.
|
|
2552
|
-
*
|
|
2553
|
-
* @example Default radius
|
|
2554
|
-
* ```ts
|
|
2555
|
-
* import { cx, roundedL } from 'typewritingclass'
|
|
2556
|
-
*
|
|
2557
|
-
* cx(roundedL())
|
|
2558
|
-
* // CSS: border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem;
|
|
2559
|
-
* ```
|
|
2560
|
-
*
|
|
2561
|
-
* @example Custom radius
|
|
2562
|
-
* ```ts
|
|
2563
|
-
* cx(roundedL('0.75rem'))
|
|
2564
|
-
* // CSS: border-top-left-radius: 0.75rem; border-bottom-left-radius: 0.75rem;
|
|
2565
|
-
* ```
|
|
2566
|
-
*
|
|
2567
|
-
* @example Dynamic value
|
|
2568
|
-
* ```ts
|
|
2569
|
-
* import { dcx, roundedL, dynamic } from 'typewritingclass'
|
|
2570
|
-
*
|
|
2571
|
-
* const { className, style } = dcx(roundedL(dynamic(radius)))
|
|
2572
|
-
* // CSS: border-top-left-radius: var(--twc-d0); border-bottom-left-radius: var(--twc-d0);
|
|
2573
|
-
* // style: { '--twc-d0': radius }
|
|
2574
|
-
* ```
|
|
2575
|
-
*/
|
|
2576
|
-
declare function roundedL(value?: string | DynamicValue): StyleRule;
|
|
2577
|
-
/**
|
|
2578
|
-
* Sets the `border-radius` on the top-right and bottom-right corners of an element.
|
|
2579
|
-
*
|
|
2580
|
-
* When called without arguments, uses the default border radius (`0.25rem`).
|
|
2581
|
-
* Accepts an optional raw CSS string or a {@link DynamicValue} for runtime values.
|
|
2582
|
-
*
|
|
2583
|
-
* @param value - Optional CSS border-radius string (`'0.5rem'`) or `dynamic()` value. Defaults to `'0.25rem'`.
|
|
2584
|
-
* @returns A {@link StyleRule} that sets `border-top-right-radius` and `border-bottom-right-radius`.
|
|
2585
|
-
*
|
|
2586
|
-
* @example Default radius
|
|
2587
|
-
* ```ts
|
|
2588
|
-
* import { cx, roundedR } from 'typewritingclass'
|
|
2589
|
-
*
|
|
2590
|
-
* cx(roundedR())
|
|
2591
|
-
* // CSS: border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem;
|
|
2592
|
-
* ```
|
|
2593
|
-
*
|
|
2594
|
-
* @example Custom radius
|
|
2595
|
-
* ```ts
|
|
2596
|
-
* cx(roundedR('0.75rem'))
|
|
2597
|
-
* // CSS: border-top-right-radius: 0.75rem; border-bottom-right-radius: 0.75rem;
|
|
2598
|
-
* ```
|
|
2599
|
-
*
|
|
2600
|
-
* @example Dynamic value
|
|
2601
|
-
* ```ts
|
|
2602
|
-
* import { dcx, roundedR, dynamic } from 'typewritingclass'
|
|
2603
|
-
*
|
|
2604
|
-
* const { className, style } = dcx(roundedR(dynamic(radius)))
|
|
2605
|
-
* // CSS: border-top-right-radius: var(--twc-d0); border-bottom-right-radius: var(--twc-d0);
|
|
2606
|
-
* // style: { '--twc-d0': radius }
|
|
2607
|
-
* ```
|
|
2608
|
-
*/
|
|
2609
|
-
declare function roundedR(value?: string | DynamicValue): StyleRule;
|
|
2610
2080
|
/**
|
|
2611
2081
|
* Sets a solid border on all sides of an element.
|
|
2612
2082
|
*
|
|
@@ -2758,76 +2228,25 @@ declare function borderL(width?: string | number): StyleRule;
|
|
|
2758
2228
|
* ```
|
|
2759
2229
|
*/
|
|
2760
2230
|
declare function ring(width?: string | number, color?: string): StyleRule;
|
|
2761
|
-
declare function roundedTL(value?: string | DynamicValue): StyleRule;
|
|
2762
|
-
declare function roundedTR(value?: string | DynamicValue): StyleRule;
|
|
2763
|
-
declare function roundedBR(value?: string | DynamicValue): StyleRule;
|
|
2764
|
-
declare function roundedBL(value?: string | DynamicValue): StyleRule;
|
|
2765
|
-
declare function roundedSS(value?: string | DynamicValue): StyleRule;
|
|
2766
|
-
declare function roundedSE(value?: string | DynamicValue): StyleRule;
|
|
2767
|
-
declare function roundedEE(value?: string | DynamicValue): StyleRule;
|
|
2768
|
-
declare function roundedES(value?: string | DynamicValue): StyleRule;
|
|
2769
2231
|
declare function borderX(width?: string | number): StyleRule;
|
|
2770
2232
|
declare function borderY(width?: string | number): StyleRule;
|
|
2771
2233
|
declare function borderS(width?: string | number): StyleRule;
|
|
2772
2234
|
declare function borderE(width?: string | number): StyleRule;
|
|
2773
2235
|
declare function borderStyle(value: string): StyleRule;
|
|
2774
2236
|
declare function outlineWidth(value: string | number): StyleRule;
|
|
2775
|
-
declare function outlineColor(value: string | DynamicValue): StyleRule;
|
|
2776
2237
|
declare function outlineStyle(value: string): StyleRule;
|
|
2777
2238
|
declare function outlineOffset(value: string | number): StyleRule;
|
|
2778
2239
|
declare function outline(width?: string | number, style?: string, color?: string): StyleRule;
|
|
2779
2240
|
declare function outlineNone(): StyleRule;
|
|
2780
2241
|
declare function ringInset(): StyleRule;
|
|
2781
|
-
declare function ringColor(value: string | DynamicValue): StyleRule;
|
|
2782
2242
|
declare function ringOffsetWidth(value: string | number): StyleRule;
|
|
2783
2243
|
declare function ringOffsetColor(value: string | DynamicValue): StyleRule;
|
|
2784
2244
|
declare function divideX(width?: string | number): StyleRule;
|
|
2785
2245
|
declare function divideY(width?: string | number): StyleRule;
|
|
2786
|
-
declare function divideColor(value: string | DynamicValue): StyleRule;
|
|
2787
2246
|
declare function divideStyle(value: string): StyleRule;
|
|
2788
2247
|
declare function divideXReverse(): StyleRule;
|
|
2789
2248
|
declare function divideYReverse(): StyleRule;
|
|
2790
2249
|
|
|
2791
|
-
/**
|
|
2792
|
-
* Sets the `box-shadow` of an element.
|
|
2793
|
-
*
|
|
2794
|
-
* When called without arguments, uses the default shadow from the shadows theme
|
|
2795
|
-
* (`0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)`).
|
|
2796
|
-
* Accepts an optional raw CSS string or a {@link DynamicValue} for runtime values.
|
|
2797
|
-
*
|
|
2798
|
-
* @param value - Optional CSS box-shadow string or `dynamic()` value. Defaults to the theme's `DEFAULT` shadow.
|
|
2799
|
-
* @returns A {@link StyleRule} that sets `box-shadow`.
|
|
2800
|
-
*
|
|
2801
|
-
* @example Default shadow
|
|
2802
|
-
* ```ts
|
|
2803
|
-
* import { cx, shadow } from 'typewritingclass'
|
|
2804
|
-
*
|
|
2805
|
-
* cx(shadow())
|
|
2806
|
-
* // CSS: box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
|
2807
|
-
* ```
|
|
2808
|
-
*
|
|
2809
|
-
* @example Custom shadow
|
|
2810
|
-
* ```ts
|
|
2811
|
-
* cx(shadow('0 4px 6px -1px rgb(0 0 0 / 0.1)'))
|
|
2812
|
-
* // CSS: box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
|
2813
|
-
* ```
|
|
2814
|
-
*
|
|
2815
|
-
* @example No shadow
|
|
2816
|
-
* ```ts
|
|
2817
|
-
* cx(shadow('none'))
|
|
2818
|
-
* // CSS: box-shadow: none;
|
|
2819
|
-
* ```
|
|
2820
|
-
*
|
|
2821
|
-
* @example Dynamic value
|
|
2822
|
-
* ```ts
|
|
2823
|
-
* import { dcx, shadow, dynamic } from 'typewritingclass'
|
|
2824
|
-
*
|
|
2825
|
-
* const { className, style } = dcx(shadow(dynamic(shadowValue)))
|
|
2826
|
-
* // CSS: box-shadow: var(--twc-d0);
|
|
2827
|
-
* // style: { '--twc-d0': shadowValue }
|
|
2828
|
-
* ```
|
|
2829
|
-
*/
|
|
2830
|
-
declare function shadow(value?: string | DynamicValue): StyleRule;
|
|
2831
2250
|
/**
|
|
2832
2251
|
* Sets the `opacity` of an element.
|
|
2833
2252
|
*
|
|
@@ -2907,42 +2326,9 @@ declare function opacity(value: number | DynamicValue): StyleRule;
|
|
|
2907
2326
|
* ```
|
|
2908
2327
|
*/
|
|
2909
2328
|
declare function backdrop(value: string | DynamicValue): StyleRule;
|
|
2910
|
-
declare function shadowColor(value: string | DynamicValue): StyleRule;
|
|
2911
2329
|
declare function mixBlendMode(value: string): StyleRule;
|
|
2912
2330
|
declare function bgBlendMode(value: string): StyleRule;
|
|
2913
2331
|
|
|
2914
|
-
/**
|
|
2915
|
-
* Sets the `cursor` style of an element.
|
|
2916
|
-
*
|
|
2917
|
-
* Accepts a raw CSS cursor string or a {@link DynamicValue} for runtime values.
|
|
2918
|
-
*
|
|
2919
|
-
* @param value - A CSS cursor value (`'pointer'`, `'grab'`, `'not-allowed'`, etc.) or `dynamic()` value.
|
|
2920
|
-
* @returns A {@link StyleRule} that sets `cursor`.
|
|
2921
|
-
*
|
|
2922
|
-
* @example Pointer cursor
|
|
2923
|
-
* ```ts
|
|
2924
|
-
* import { cx, cursor } from 'typewritingclass'
|
|
2925
|
-
*
|
|
2926
|
-
* cx(cursor('pointer'))
|
|
2927
|
-
* // CSS: cursor: pointer;
|
|
2928
|
-
* ```
|
|
2929
|
-
*
|
|
2930
|
-
* @example Not-allowed cursor
|
|
2931
|
-
* ```ts
|
|
2932
|
-
* cx(cursor('not-allowed'))
|
|
2933
|
-
* // CSS: cursor: not-allowed;
|
|
2934
|
-
* ```
|
|
2935
|
-
*
|
|
2936
|
-
* @example Dynamic value
|
|
2937
|
-
* ```ts
|
|
2938
|
-
* import { dcx, cursor, dynamic } from 'typewritingclass'
|
|
2939
|
-
*
|
|
2940
|
-
* const { className, style } = dcx(cursor(dynamic(cursorType)))
|
|
2941
|
-
* // CSS: cursor: var(--twc-d0);
|
|
2942
|
-
* // style: { '--twc-d0': cursorType }
|
|
2943
|
-
* ```
|
|
2944
|
-
*/
|
|
2945
|
-
declare function cursor(value: string | DynamicValue): StyleRule;
|
|
2946
2332
|
/**
|
|
2947
2333
|
* Sets the `user-select` behavior of an element.
|
|
2948
2334
|
*
|
|
@@ -2997,9 +2383,7 @@ declare function select(value: string): StyleRule;
|
|
|
2997
2383
|
* ```
|
|
2998
2384
|
*/
|
|
2999
2385
|
declare function pointerEvents(value: string): StyleRule;
|
|
3000
|
-
declare function accentColor(value: string | DynamicValue): StyleRule;
|
|
3001
2386
|
declare function appearance(value: string): StyleRule;
|
|
3002
|
-
declare function caretColor(value: string | DynamicValue): StyleRule;
|
|
3003
2387
|
declare function resize(value: string): StyleRule;
|
|
3004
2388
|
declare function scrollBehavior(value: string): StyleRule;
|
|
3005
2389
|
declare function scrollMargin(value: number | string | DynamicValue): StyleRule;
|
|
@@ -3089,9 +2473,6 @@ declare function bgRepeat(value: string): StyleRule;
|
|
|
3089
2473
|
declare function bgSize(value: string | DynamicValue): StyleRule;
|
|
3090
2474
|
declare function bgImage(value: string | DynamicValue): StyleRule;
|
|
3091
2475
|
declare function bgGradient(direction?: string): StyleRule;
|
|
3092
|
-
declare function gradientFrom(color: string | DynamicValue): StyleRule;
|
|
3093
|
-
declare function gradientVia(color: string | DynamicValue): StyleRule;
|
|
3094
|
-
declare function gradientTo(color: string | DynamicValue): StyleRule;
|
|
3095
2476
|
|
|
3096
2477
|
/**
|
|
3097
2478
|
* Applies styles only when the element is hovered.
|
|
@@ -3466,4 +2847,50 @@ declare function peerHas(selector: string): Modifier;
|
|
|
3466
2847
|
declare const rtl: Modifier;
|
|
3467
2848
|
declare const ltr: Modifier;
|
|
3468
2849
|
|
|
3469
|
-
|
|
2850
|
+
declare const bg: any;
|
|
2851
|
+
declare const textColor: any;
|
|
2852
|
+
declare const borderColor: any;
|
|
2853
|
+
declare const shadowColor: any;
|
|
2854
|
+
declare const ringColor: any;
|
|
2855
|
+
declare const outlineColor: any;
|
|
2856
|
+
declare const accentColor: any;
|
|
2857
|
+
declare const caretColor: any;
|
|
2858
|
+
declare const divideColor: any;
|
|
2859
|
+
declare const textDecorationColor: any;
|
|
2860
|
+
declare const gradientFrom: any;
|
|
2861
|
+
declare const gradientVia: any;
|
|
2862
|
+
declare const gradientTo: any;
|
|
2863
|
+
declare const rounded: any;
|
|
2864
|
+
declare const roundedT: any;
|
|
2865
|
+
declare const roundedB: any;
|
|
2866
|
+
declare const roundedL: any;
|
|
2867
|
+
declare const roundedR: any;
|
|
2868
|
+
declare const roundedTL: any;
|
|
2869
|
+
declare const roundedTR: any;
|
|
2870
|
+
declare const roundedBR: any;
|
|
2871
|
+
declare const roundedBL: any;
|
|
2872
|
+
declare const roundedSS: any;
|
|
2873
|
+
declare const roundedSE: any;
|
|
2874
|
+
declare const roundedEE: any;
|
|
2875
|
+
declare const roundedES: any;
|
|
2876
|
+
declare const shadow: any;
|
|
2877
|
+
declare const text: any;
|
|
2878
|
+
declare const font: any;
|
|
2879
|
+
declare const tracking: any;
|
|
2880
|
+
declare const leading: any;
|
|
2881
|
+
declare const fontFamily: any;
|
|
2882
|
+
declare const textAlign: any;
|
|
2883
|
+
declare const textTransform: any;
|
|
2884
|
+
declare const textOverflow: any;
|
|
2885
|
+
declare const textWrap: any;
|
|
2886
|
+
declare const display: any;
|
|
2887
|
+
declare const items: any;
|
|
2888
|
+
declare const justify: any;
|
|
2889
|
+
declare const self: any;
|
|
2890
|
+
declare const overflow: any;
|
|
2891
|
+
declare const overflowX: any;
|
|
2892
|
+
declare const overflowY: any;
|
|
2893
|
+
declare const cursor: any;
|
|
2894
|
+
declare const objectFit: any;
|
|
2895
|
+
|
|
2896
|
+
export { AlignItemsTokens, ColorTokenKey, CursorTokens, DisplayTokens, DynamicResult, DynamicValue, FontFamilyTokens, FontWeightTokens, JustifyTokens, LeadingTokens, Modifier, ObjectFitTokens, OverflowTokens, RadiusTokens, SelfTokens, ShadowTokens, StyleRule, TextAlignTokens, TextOverflowTokens, TextSizeTokens, TextTransformTokens, TextWrapTokens, TrackingTokens, type TwChain, _2xl, absolute, accentColor, active, after, alignContent, animate, antialiased, appearance, aria, ariaChecked, ariaDisabled, ariaExpanded, ariaHidden, ariaPressed, ariaReadonly, ariaRequired, ariaSelected, aspectRatio, autoCols, autoRows, autofill, backdrop, backdropBlur, backdropBrightness, backdropContrast, backdropGrayscale, backdropHueRotate, backdropInvert, backdropOpacity, backdropSaturate, backdropSepia, backdrop_, before, bg, bgAttachment, bgBlendMode, bgClip, bgGradient, bgImage, bgOrigin, bgPosition, bgRepeat, bgSize, blur, border, borderB, borderCollapse, borderColor, borderE, borderL, borderR, borderS, borderSeparate, borderSpacing, borderSpacingX, borderSpacingY, borderStyle, borderT, borderX, borderY, bottom, boxDecorationBreak, boxSizing, breakAfter, breakBefore, breakInside, brightness, captionSide, caretColor, checked, clear_, colEnd, colSpan, colStart, collapse_, columns, container, content_, contrast, contrastLess, contrastMore, cursor, cx, dark, data, dcx, default_, delay, diagonalFractions, disabled, display, divideColor, divideStyle, divideX, divideXReverse, divideY, divideYReverse, dropShadow, duration, ease, empty, end, even, file_, fill, firstChild, firstLetter, firstLine, firstOfType, fixed, flex, flex1, flexAuto, flexBasis, flexCol, flexColReverse, flexInitial, flexNone, flexNowrap, flexRow, flexRowReverse, flexWrap, flexWrapReverse, float_, focus, focusVisible, focusWithin, font, fontFamily, forcedColorAdjust, forcedColors, gap, gapX, gapY, generateCSS, googleFonts, gradientFrom, gradientTo, gradientVia, grayscale, grid, gridCols, gridFlow, gridRows, groupActive, groupChecked, groupDisabled, groupEmpty, groupEven, groupFirst, groupFocus, groupFocusVisible, groupFocusWithin, groupHas, groupHover, groupLast, groupOdd, groupOpen, groupVisited, grow, h, has_, hover, hueRotate, hyphens, inRange, indeterminate, inlineFlex, inset, insetX, insetY, invalid, invert, invisible, isolate, isolationAuto, italic, items, justify, justifyItems, justifySelf, landscape, lastChild, lastOfType, layer, leading, left, lg, lineClamp, liningNums, listStyleImage, listStylePosition, listStyleType, ltr, m, marker, max2xl, maxH, maxLg, maxMd, maxSm, maxW, maxXl, mb, md, me, minH, minW, mixBlendMode, ml, motionReduce, motionSafe, mr, ms, mt, mx, my, normalNums, notItalic, notSrOnly, objectFit, objectPosition, odd, oldstyleNums, onlyChild, onlyOfType, opacity, open_, order, ordinal, outOfRange, outline, outlineColor, outlineNone, outlineOffset, outlineStyle, outlineWidth, overflow, overflowX, overflowY, overscrollBehavior, overscrollX, overscrollY, p, pb, pe, peerActive, peerChecked, peerDisabled, peerEmpty, peerEven, peerFirst, peerFocus, peerFocusVisible, peerFocusWithin, peerHas, peerHover, peerInvalid, peerLast, peerOdd, peerOpen, peerPlaceholderShown, peerRequired, peerVisited, pl, placeContent, placeItems, placeSelf, placeholderShown, placeholder_, pointerEvents, portrait, pr, print_, proportionalNums, ps, pt, px, py, readOnly, relative, required_, resize, right, ring, ringColor, ringInset, ringOffsetColor, ringOffsetWidth, rotate, rounded, roundedB, roundedBL, roundedBR, roundedEE, roundedES, roundedL, roundedR, roundedSE, roundedSS, roundedT, roundedTL, roundedTR, rowEnd, rowSpan, rowStart, rtl, saturate, scale, scaleX, scaleY, scrollBehavior, scrollMargin, scrollMarginB, scrollMarginL, scrollMarginR, scrollMarginT, scrollMarginX, scrollMarginY, scrollPadding, scrollPaddingB, scrollPaddingL, scrollPaddingR, scrollPaddingT, scrollPaddingX, scrollPaddingY, select, selection_, self, sepia, shadow, shadowColor, shrink, size, skewX, skewY, slashedZero, sm, snapAlign, snapStop, snapType, spaceX, spaceXReverse, spaceY, spaceYReverse, srOnly, stackedFractions, start, static_, sticky, stroke, strokeWidth, subpixelAntialiased, supports, tableLayout, tabularNums, target, text, textAlign, textColor, textDecoration, textDecorationColor, textDecorationStyle, textDecorationThickness, textIndent, textOverflow, textTransform, textUnderlineOffset, textWrap, top, touchAction, tracking, transformGpu, transformNone, transformOrigin, transition, transitionAll, transitionColors, transitionNone, transitionOpacity, transitionShadow, transitionTransform, translateX, translateY, truncate, tw, valid, verticalAlign, visible, visited, w, when, whitespace, willChange, wordBreak, xl, z };
|