typewritingclass 0.2.0

package/src/utilities/colors.ts

@@ -0,0 +1,127 @@
+import type { StyleRule } from '../types.ts'
+import type { DynamicValue } from '../dynamic.ts'
+import { createRule, createDynamicRule } from '../rule.ts'
+import { isDynamic } from '../dynamic.ts'
+
+/**
+ * Sets the background color of an element.
+ *
+ * Accepts a raw CSS color string or a {@link DynamicValue} for runtime values.
+ *
+ * @param color - CSS color string (e.g. `'#3b82f6'`, `'red'`, `'rgb(59, 130, 246)'`) or `dynamic()` value.
+ * @returns A {@link StyleRule} that sets `background-color`.
+ *
+ * @example CSS color string
+ * ```ts
+ * import { cx, bg } from 'typewritingclass'
+ *
+ * cx(bg('#3b82f6'))
+ * // CSS: background-color: #3b82f6;
+ * ```
+ *
+ * @example Named color
+ * ```ts
+ * cx(bg('transparent'))
+ * // CSS: background-color: transparent;
+ * ```
+ *
+ * @example Dynamic value
+ * ```ts
+ * import { dcx, bg, dynamic } from 'typewritingclass'
+ *
+ * const { className, style } = dcx(bg(dynamic(themeColor)))
+ * // CSS: background-color: var(--twc-d0);
+ * // style: { '--twc-d0': themeColor }
+ * ```
+ */
+export function bg(color: string | DynamicValue): StyleRule {
+  if (isDynamic(color)) {
+    return createDynamicRule(
+      { 'background-color': `var(${color.__id})` },
+      { [color.__id]: String(color.__value) },
+    )
+  }
+  return createRule({ 'background-color': color })
+}
+
+/**
+ * Sets the text color of an element.
+ *
+ * Accepts a raw CSS color string or a {@link DynamicValue} for runtime values.
+ *
+ * @param color - CSS color string (e.g. `'#111827'`, `'white'`, `'rgb(17, 24, 39)'`) or `dynamic()` value.
+ * @returns A {@link StyleRule} that sets `color`.
+ *
+ * @example CSS color string
+ * ```ts
+ * import { cx, textColor } from 'typewritingclass'
+ *
+ * cx(textColor('#111827'))
+ * // CSS: color: #111827;
+ * ```
+ *
+ * @example Named color
+ * ```ts
+ * cx(textColor('inherit'))
+ * // CSS: color: inherit;
+ * ```
+ *
+ * @example Dynamic value
+ * ```ts
+ * import { dcx, textColor, dynamic } from 'typewritingclass'
+ *
+ * const { className, style } = dcx(textColor(dynamic(themeColor)))
+ * // CSS: color: var(--twc-d0);
+ * // style: { '--twc-d0': themeColor }
+ * ```
+ */
+export function textColor(color: string | DynamicValue): StyleRule {
+  if (isDynamic(color)) {
+    return createDynamicRule(
+      { color: `var(${color.__id})` },
+      { [color.__id]: String(color.__value) },
+    )
+  }
+  return createRule({ color })
+}
+
+/**
+ * Sets the border color of an element.
+ *
+ * Accepts a raw CSS color string or a {@link DynamicValue} for runtime values.
+ *
+ * @param color - CSS color string (e.g. `'#e5e7eb'`, `'red'`, `'rgb(229, 231, 235)'`) or `dynamic()` value.
+ * @returns A {@link StyleRule} that sets `border-color`.
+ *
+ * @example CSS color string
+ * ```ts
+ * import { cx, borderColor } from 'typewritingclass'
+ *
+ * cx(borderColor('#e5e7eb'))
+ * // CSS: border-color: #e5e7eb;
+ * ```
+ *
+ * @example Named color
+ * ```ts
+ * cx(borderColor('currentColor'))
+ * // CSS: border-color: currentColor;
+ * ```
+ *
+ * @example Dynamic value
+ * ```ts
+ * import { dcx, borderColor, dynamic } from 'typewritingclass'
+ *
+ * const { className, style } = dcx(borderColor(dynamic(themeColor)))
+ * // CSS: border-color: var(--twc-d0);
+ * // style: { '--twc-d0': themeColor }
+ * ```
+ */
+export function borderColor(color: string | DynamicValue): StyleRule {
+  if (isDynamic(color)) {
+    return createDynamicRule(
+      { 'border-color': `var(${color.__id})` },
+      { [color.__id]: String(color.__value) },
+    )
+  }
+  return createRule({ 'border-color': color })
+}

package/src/utilities/effects.ts

@@ -0,0 +1,169 @@
+import type { StyleRule } from '../types.ts'
+import type { DynamicValue } from '../dynamic.ts'
+import { createRule, createDynamicRule } from '../rule.ts'
+import { DEFAULT as defaultShadow } from '../theme/shadows.ts'
+import { isDynamic } from '../dynamic.ts'
+
+/**
+ * Sets the `box-shadow` of an element.
+ *
+ * When called without arguments, uses the default shadow from the shadows theme
+ * (`0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)`).
+ * Accepts an optional raw CSS string or a {@link DynamicValue} for runtime values.
+ *
+ * @param value - Optional CSS box-shadow string or `dynamic()` value. Defaults to the theme's `DEFAULT` shadow.
+ * @returns A {@link StyleRule} that sets `box-shadow`.
+ *
+ * @example Default shadow
+ * ```ts
+ * import { cx, shadow } from 'typewritingclass'
+ *
+ * cx(shadow())
+ * // CSS: box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+ * ```
+ *
+ * @example Custom shadow
+ * ```ts
+ * cx(shadow('0 4px 6px -1px rgb(0 0 0 / 0.1)'))
+ * // CSS: box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+ * ```
+ *
+ * @example No shadow
+ * ```ts
+ * cx(shadow('none'))
+ * // CSS: box-shadow: none;
+ * ```
+ *
+ * @example Dynamic value
+ * ```ts
+ * import { dcx, shadow, dynamic } from 'typewritingclass'
+ *
+ * const { className, style } = dcx(shadow(dynamic(shadowValue)))
+ * // CSS: box-shadow: var(--twc-d0);
+ * // style: { '--twc-d0': shadowValue }
+ * ```
+ */
+export function shadow(value?: string | DynamicValue): StyleRule {
+  if (isDynamic(value)) {
+    return createDynamicRule(
+      { 'box-shadow': `var(${value.__id})` },
+      { [value.__id]: String(value.__value) },
+    )
+  }
+  return createRule({ 'box-shadow': (value as string | undefined) ?? defaultShadow })
+}
+
+/**
+ * Sets the `opacity` of an element.
+ *
+ * Accepts a numeric opacity value (between `0` and `1`) or a {@link DynamicValue}
+ * for runtime values. The numeric value is converted to a string for the CSS declaration.
+ *
+ * @param value - A numeric opacity (`0` to `1`) or `dynamic()` value.
+ * @returns A {@link StyleRule} that sets `opacity`.
+ *
+ * @example Fully opaque
+ * ```ts
+ * import { cx, opacity } from 'typewritingclass'
+ *
+ * cx(opacity(1))
+ * // CSS: opacity: 1;
+ * ```
+ *
+ * @example Semi-transparent
+ * ```ts
+ * cx(opacity(0.5))
+ * // CSS: opacity: 0.5;
+ * ```
+ *
+ * @example Hidden
+ * ```ts
+ * cx(opacity(0))
+ * // CSS: opacity: 0;
+ * ```
+ *
+ * @example Dynamic value
+ * ```ts
+ * import { dcx, opacity, dynamic } from 'typewritingclass'
+ *
+ * const { className, style } = dcx(opacity(dynamic(opacityValue)))
+ * // CSS: opacity: var(--twc-d0);
+ * // style: { '--twc-d0': opacityValue }
+ * ```
+ */
+export function opacity(value: number | DynamicValue): StyleRule {
+  if (isDynamic(value)) {
+    return createDynamicRule(
+      { opacity: `var(${value.__id})` },
+      { [value.__id]: String(value.__value) },
+    )
+  }
+  return createRule({ opacity: String(value) })
+}
+
+/**
+ * Sets the `backdrop-filter` CSS property on an element.
+ *
+ * Applies graphical effects (such as blurring or color shifting) to the area
+ * behind the element. Accepts a raw CSS backdrop-filter string or a
+ * {@link DynamicValue} for runtime values.
+ *
+ * @param value - A CSS backdrop-filter string (`'blur(8px)'`, `'saturate(180%)'`) or `dynamic()` value.
+ * @returns A {@link StyleRule} that sets `backdrop-filter`.
+ *
+ * @example Blur backdrop
+ * ```ts
+ * import { cx, backdrop } from 'typewritingclass'
+ *
+ * cx(backdrop('blur(8px)'))
+ * // CSS: backdrop-filter: blur(8px);
+ * ```
+ *
+ * @example Saturate backdrop
+ * ```ts
+ * cx(backdrop('saturate(180%)'))
+ * // CSS: backdrop-filter: saturate(180%);
+ * ```
+ *
+ * @example Combined filters
+ * ```ts
+ * cx(backdrop('blur(12px) saturate(150%)'))
+ * // CSS: backdrop-filter: blur(12px) saturate(150%);
+ * ```
+ *
+ * @example Dynamic value
+ * ```ts
+ * import { dcx, backdrop, dynamic } from 'typewritingclass'
+ *
+ * const { className, style } = dcx(backdrop(dynamic(filterValue)))
+ * // CSS: backdrop-filter: var(--twc-d0);
+ * // style: { '--twc-d0': filterValue }
+ * ```
+ */
+export function backdrop(value: string | DynamicValue): StyleRule {
+  if (isDynamic(value)) {
+    return createDynamicRule(
+      { 'backdrop-filter': `var(${value.__id})` },
+      { [value.__id]: String(value.__value) },
+    )
+  }
+  return createRule({ 'backdrop-filter': value })
+}
+
+export function shadowColor(value: string | DynamicValue): StyleRule {
+  if (isDynamic(value)) {
+    return createDynamicRule(
+      { '--twc-shadow-color': `var(${value.__id})` },
+      { [value.__id]: String(value.__value) },
+    )
+  }
+  return createRule({ '--twc-shadow-color': value })
+}
+
+export function mixBlendMode(value: string): StyleRule {
+  return createRule({ 'mix-blend-mode': value })
+}
+
+export function bgBlendMode(value: string): StyleRule {
+  return createRule({ 'background-blend-mode': value })
+}

package/src/utilities/filters.ts

@@ -0,0 +1,96 @@
+import type { StyleRule } from '../types.ts'
+import type { DynamicValue } from '../dynamic.ts'
+import { createRule, createDynamicRule } from '../rule.ts'
+import { isDynamic } from '../dynamic.ts'
+
+function filterRule(fn: string, value: string | DynamicValue, prop: 'filter' | 'backdrop-filter' = 'filter'): StyleRule {
+  if (isDynamic(value)) {
+    return createDynamicRule(
+      { [prop]: `${fn}(var(${value.__id}))` },
+      { [value.__id]: String(value.__value) },
+    )
+  }
+  return createRule({ [prop]: `${fn}(${value})` })
+}
+
+// --- Filter utilities ---
+
+export function blur(value: string | DynamicValue = '8px'): StyleRule {
+  return filterRule('blur', value)
+}
+
+export function brightness(value: string | DynamicValue): StyleRule {
+  return filterRule('brightness', value)
+}
+
+export function contrast(value: string | DynamicValue): StyleRule {
+  return filterRule('contrast', value)
+}
+
+export function dropShadow(value: string | DynamicValue): StyleRule {
+  if (isDynamic(value)) {
+    return createDynamicRule(
+      { filter: `drop-shadow(var(${value.__id}))` },
+      { [value.__id]: String(value.__value) },
+    )
+  }
+  return createRule({ filter: `drop-shadow(${value})` })
+}
+
+export function grayscale(value: string | DynamicValue = '100%'): StyleRule {
+  return filterRule('grayscale', value)
+}
+
+export function hueRotate(value: string | DynamicValue): StyleRule {
+  return filterRule('hue-rotate', value)
+}
+
+export function invert(value: string | DynamicValue = '100%'): StyleRule {
+  return filterRule('invert', value)
+}
+
+export function saturate(value: string | DynamicValue): StyleRule {
+  return filterRule('saturate', value)
+}
+
+export function sepia(value: string | DynamicValue = '100%'): StyleRule {
+  return filterRule('sepia', value)
+}
+
+// --- Backdrop filter utilities ---
+
+export function backdropBlur(value: string | DynamicValue = '8px'): StyleRule {
+  return filterRule('blur', value, 'backdrop-filter')
+}
+
+export function backdropBrightness(value: string | DynamicValue): StyleRule {
+  return filterRule('brightness', value, 'backdrop-filter')
+}
+
+export function backdropContrast(value: string | DynamicValue): StyleRule {
+  return filterRule('contrast', value, 'backdrop-filter')
+}
+
+export function backdropGrayscale(value: string | DynamicValue = '100%'): StyleRule {
+  return filterRule('grayscale', value, 'backdrop-filter')
+}
+
+export function backdropHueRotate(value: string | DynamicValue): StyleRule {
+  return filterRule('hue-rotate', value, 'backdrop-filter')
+}
+
+export function backdropInvert(value: string | DynamicValue = '100%'): StyleRule {
+  return filterRule('invert', value, 'backdrop-filter')
+}
+
+export function backdropOpacity(value: string | DynamicValue): StyleRule {
+  return filterRule('opacity', value, 'backdrop-filter')
+}
+
+export function backdropSaturate(value: string | DynamicValue): StyleRule {
+  return filterRule('saturate', value, 'backdrop-filter')
+}
+
+export function backdropSepia(value: string | DynamicValue = '100%'): StyleRule {
+  return filterRule('sepia', value, 'backdrop-filter')
+}

package/src/utilities/index.ts

@@ -0,0 +1,57 @@
+export { p, px, py, pt, pr, pb, pl, m, mx, my, mt, mr, mb, ml, gap, gapX, gapY, ps, pe, ms, me, spaceX, spaceY, spaceXReverse, spaceYReverse } from './spacing.ts'
+export { bg, textColor, borderColor } from './colors.ts'
+export { text, font, tracking, leading, textAlign, fontFamily, antialiased, subpixelAntialiased, italic, notItalic, normalNums, ordinal, slashedZero, liningNums, oldstyleNums, proportionalNums, tabularNums, diagonalFractions, stackedFractions, lineClamp, listStyleImage, listStylePosition, listStyleType, textDecoration, textDecorationColor, textDecorationStyle, textDecorationThickness, textUnderlineOffset, textTransform, textOverflow, textWrap, textIndent, verticalAlign, whitespace, wordBreak, hyphens, content_, truncate } from './typography.ts'
+export {
+  flex, flexCol, flexRow, flexWrap, inlineFlex,
+  grid, gridCols, gridRows,
+  w, h, size, minW, minH, maxW, maxH,
+  display, items, justify, self,
+  overflow, overflowX, overflowY,
+  relative, absolute, fixed, sticky,
+  top, right, bottom, left, inset,
+  z,
+  aspectRatio, columns, breakAfter, breakBefore, breakInside,
+  boxDecorationBreak, boxSizing, float_, clear_, isolate, isolationAuto,
+  objectFit, objectPosition, overscrollBehavior, overscrollX, overscrollY,
+  static_, insetX, insetY, start, end,
+  visible, invisible, collapse_,
+  flexBasis, flexRowReverse, flexColReverse, flexWrapReverse, flexNowrap,
+  flex1, flexAuto, flexInitial, flexNone,
+  grow, shrink, order,
+  colSpan, colStart, colEnd, rowSpan, rowStart, rowEnd,
+  gridFlow, autoCols, autoRows,
+  justifyItems, justifySelf, alignContent, placeContent, placeItems, placeSelf,
+  container,
+} from './layout.ts'
+export {
+  rounded, roundedT, roundedB, roundedL, roundedR, border, borderT, borderR, borderB, borderL, ring,
+  roundedTL, roundedTR, roundedBR, roundedBL, roundedSS, roundedSE, roundedEE, roundedES,
+  borderX, borderY, borderS, borderE, borderStyle,
+  outlineWidth, outlineColor, outlineStyle, outlineOffset, outline, outlineNone,
+  ringColor, ringOffsetWidth, ringOffsetColor, ringInset,
+  divideX, divideY, divideColor, divideStyle, divideXReverse, divideYReverse,
+} from './borders.ts'
+export { shadow, opacity, backdrop, shadowColor, mixBlendMode, bgBlendMode } from './effects.ts'
+export {
+  cursor, select, pointerEvents,
+  accentColor, appearance, caretColor, resize,
+  scrollBehavior, scrollMargin, scrollMarginX, scrollMarginY,
+  scrollMarginT, scrollMarginR, scrollMarginB, scrollMarginL,
+  scrollPadding, scrollPaddingX, scrollPaddingY,
+  scrollPaddingT, scrollPaddingR, scrollPaddingB, scrollPaddingL,
+  snapAlign, snapStop, snapType, touchAction, willChange,
+} from './interactivity.ts'
+export {
+  blur, brightness, contrast, dropShadow, grayscale, hueRotate, invert, saturate, sepia,
+  backdropBlur, backdropBrightness, backdropContrast, backdropGrayscale, backdropHueRotate,
+  backdropInvert, backdropOpacity, backdropSaturate, backdropSepia,
+} from './filters.ts'
+export { scale, scaleX, scaleY, rotate, translateX, translateY, skewX, skewY, transformOrigin, transformGpu, transformNone } from './transforms.ts'
+export {
+  transition, transitionAll, transitionColors, transitionOpacity, transitionShadow, transitionTransform, transitionNone,
+  duration, ease, delay, animate,
+} from './transitions.ts'
+export { borderCollapse, borderSeparate, borderSpacing, borderSpacingX, borderSpacingY, tableLayout, captionSide } from './tables.ts'
+export { fill, stroke, strokeWidth } from './svg.ts'
+export { srOnly, notSrOnly, forcedColorAdjust } from './accessibility.ts'
+export { bgAttachment, bgClip, bgOrigin, bgPosition, bgRepeat, bgSize, bgImage, bgGradient, gradientFrom, gradientVia, gradientTo } from './backgrounds.ts'

package/src/utilities/interactivity.ts

@@ -0,0 +1,253 @@
+import type { StyleRule } from '../types.ts'
+import type { DynamicValue } from '../dynamic.ts'
+import { createRule, createDynamicRule } from '../rule.ts'
+import { isDynamic } from '../dynamic.ts'
+import { resolveSpacing } from '../theme/spacing.ts'
+
+/**
+ * Sets the `cursor` style of an element.
+ *
+ * Accepts a raw CSS cursor string or a {@link DynamicValue} for runtime values.
+ *
+ * @param value - A CSS cursor value (`'pointer'`, `'grab'`, `'not-allowed'`, etc.) or `dynamic()` value.
+ * @returns A {@link StyleRule} that sets `cursor`.
+ *
+ * @example Pointer cursor
+ * ```ts
+ * import { cx, cursor } from 'typewritingclass'
+ *
+ * cx(cursor('pointer'))
+ * // CSS: cursor: pointer;
+ * ```
+ *
+ * @example Not-allowed cursor
+ * ```ts
+ * cx(cursor('not-allowed'))
+ * // CSS: cursor: not-allowed;
+ * ```
+ *
+ * @example Dynamic value
+ * ```ts
+ * import { dcx, cursor, dynamic } from 'typewritingclass'
+ *
+ * const { className, style } = dcx(cursor(dynamic(cursorType)))
+ * // CSS: cursor: var(--twc-d0);
+ * // style: { '--twc-d0': cursorType }
+ * ```
+ */
+export function cursor(value: string | DynamicValue): StyleRule {
+  if (isDynamic(value)) {
+    return createDynamicRule(
+      { cursor: `var(${value.__id})` },
+      { [value.__id]: String(value.__value) },
+    )
+  }
+  return createRule({ cursor: value })
+}
+
+/**
+ * Sets the `user-select` behavior of an element.
+ *
+ * Controls whether the user can select text within the element.
+ * Accepts a raw CSS user-select string.
+ *
+ * @param value - A CSS user-select value (`'none'`, `'text'`, `'all'`, `'auto'`).
+ * @returns A {@link StyleRule} that sets `user-select`.
+ *
+ * @example Prevent selection
+ * ```ts
+ * import { cx, select } from 'typewritingclass'
+ *
+ * cx(select('none'))
+ * // CSS: user-select: none;
+ * ```
+ *
+ * @example Allow text selection
+ * ```ts
+ * cx(select('text'))
+ * // CSS: user-select: text;
+ * ```
+ *
+ * @example Select all on click
+ * ```ts
+ * cx(select('all'))
+ * // CSS: user-select: all;
+ * ```
+ */
+export function select(value: string): StyleRule {
+  return createRule({ 'user-select': value })
+}
+
+/**
+ * Sets the `pointer-events` behavior of an element.
+ *
+ * Controls whether the element can be the target of pointer events (clicks, hovers, etc.).
+ * Accepts a raw CSS pointer-events string.
+ *
+ * @param value - A CSS pointer-events value (`'none'`, `'auto'`).
+ * @returns A {@link StyleRule} that sets `pointer-events`.
+ *
+ * @example Disable pointer events
+ * ```ts
+ * import { cx, pointerEvents } from 'typewritingclass'
+ *
+ * cx(pointerEvents('none'))
+ * // CSS: pointer-events: none;
+ * ```
+ *
+ * @example Enable pointer events
+ * ```ts
+ * cx(pointerEvents('auto'))
+ * // CSS: pointer-events: auto;
+ * ```
+ */
+export function pointerEvents(value: string): StyleRule {
+  return createRule({ 'pointer-events': value })
+}
+
+export function accentColor(value: string | DynamicValue): StyleRule {
+  if (isDynamic(value)) {
+    return createDynamicRule(
+      { 'accent-color': `var(${value.__id})` },
+      { [value.__id]: String(value.__value) },
+    )
+  }
+  return createRule({ 'accent-color': value })
+}
+
+export function appearance(value: string): StyleRule {
+  return createRule({ appearance: value })
+}
+
+export function caretColor(value: string | DynamicValue): StyleRule {
+  if (isDynamic(value)) {
+    return createDynamicRule(
+      { 'caret-color': `var(${value.__id})` },
+      { [value.__id]: String(value.__value) },
+    )
+  }
+  return createRule({ 'caret-color': value })
+}
+
+export function resize(value: string): StyleRule {
+  return createRule({ resize: value })
+}
+
+export function scrollBehavior(value: string): StyleRule {
+  return createRule({ 'scroll-behavior': value })
+}
+
+function scrollSpacingRule(prop: string, value: number | string | DynamicValue): StyleRule {
+  if (isDynamic(value)) {
+    return createDynamicRule(
+      { [prop]: `var(${value.__id})` },
+      { [value.__id]: String(value.__value) },
+    )
+  }
+  const v = typeof value === 'number' ? resolveSpacing(value) : value
+  return createRule({ [prop]: v })
+}
+
+export function scrollMargin(value: number | string | DynamicValue): StyleRule {
+  return scrollSpacingRule('scroll-margin', value)
+}
+
+export function scrollMarginX(value: number | string | DynamicValue): StyleRule {
+  if (isDynamic(value)) {
+    return createDynamicRule(
+      { 'scroll-margin-left': `var(${value.__id})`, 'scroll-margin-right': `var(${value.__id})` },
+      { [value.__id]: String(value.__value) },
+    )
+  }
+  const v = typeof value === 'number' ? resolveSpacing(value) : String(value)
+  return createRule({ 'scroll-margin-left': v, 'scroll-margin-right': v })
+}
+
+export function scrollMarginY(value: number | string | DynamicValue): StyleRule {
+  if (isDynamic(value)) {
+    return createDynamicRule(
+      { 'scroll-margin-top': `var(${value.__id})`, 'scroll-margin-bottom': `var(${value.__id})` },
+      { [value.__id]: String(value.__value) },
+    )
+  }
+  const v = typeof value === 'number' ? resolveSpacing(value) : String(value)
+  return createRule({ 'scroll-margin-top': v, 'scroll-margin-bottom': v })
+}
+
+export function scrollMarginT(value: number | string | DynamicValue): StyleRule {
+  return scrollSpacingRule('scroll-margin-top', value)
+}
+
+export function scrollMarginR(value: number | string | DynamicValue): StyleRule {
+  return scrollSpacingRule('scroll-margin-right', value)
+}
+
+export function scrollMarginB(value: number | string | DynamicValue): StyleRule {
+  return scrollSpacingRule('scroll-margin-bottom', value)
+}
+
+export function scrollMarginL(value: number | string | DynamicValue): StyleRule {
+  return scrollSpacingRule('scroll-margin-left', value)
+}
+
+export function scrollPadding(value: number | string | DynamicValue): StyleRule {
+  return scrollSpacingRule('scroll-padding', value)
+}
+
+export function scrollPaddingX(value: number | string | DynamicValue): StyleRule {
+  if (isDynamic(value)) {
+    return createDynamicRule(
+      { 'scroll-padding-left': `var(${value.__id})`, 'scroll-padding-right': `var(${value.__id})` },
+      { [value.__id]: String(value.__value) },
+    )
+  }
+  const v = typeof value === 'number' ? resolveSpacing(value) : String(value)
+  return createRule({ 'scroll-padding-left': v, 'scroll-padding-right': v })
+}
+
+export function scrollPaddingY(value: number | string | DynamicValue): StyleRule {
+  if (isDynamic(value)) {
+    return createDynamicRule(
+      { 'scroll-padding-top': `var(${value.__id})`, 'scroll-padding-bottom': `var(${value.__id})` },
+      { [value.__id]: String(value.__value) },
+    )
+  }
+  const v = typeof value === 'number' ? resolveSpacing(value) : String(value)
+  return createRule({ 'scroll-padding-top': v, 'scroll-padding-bottom': v })
+}
+
+export function scrollPaddingT(value: number | string | DynamicValue): StyleRule {
+  return scrollSpacingRule('scroll-padding-top', value)
+}
+
+export function scrollPaddingR(value: number | string | DynamicValue): StyleRule {
+  return scrollSpacingRule('scroll-padding-right', value)
+}
+
+export function scrollPaddingB(value: number | string | DynamicValue): StyleRule {
+  return scrollSpacingRule('scroll-padding-bottom', value)
+}
+
+export function scrollPaddingL(value: number | string | DynamicValue): StyleRule {
+  return scrollSpacingRule('scroll-padding-left', value)
+}
+
+export function snapAlign(value: string): StyleRule {
+  return createRule({ 'scroll-snap-align': value })
+}
+
+export function snapStop(value: string): StyleRule {
+  return createRule({ 'scroll-snap-stop': value })
+}
+
+export function snapType(value: string): StyleRule {
+  return createRule({ 'scroll-snap-type': value })
+}
+
+export function touchAction(value: string): StyleRule {
+  return createRule({ 'touch-action': value })
+}
+
+export function willChange(value: string): StyleRule {
+  return createRule({ 'will-change': value })
+}