typewritingclass 0.2.0 → 0.2.2

package/src/utilities/svg.ts

@@ -2,6 +2,7 @@ import type { StyleRule } from '../types.ts'
 import type { DynamicValue } from '../dynamic.ts'
 import { createRule, createDynamicRule } from '../rule.ts'
 import { isDynamic } from '../dynamic.ts'
+import { resolveColor } from './colors.ts'
 
 export function fill(value: string | DynamicValue): StyleRule {
   if (isDynamic(value)) {
@@ -10,7 +11,7 @@ export function fill(value: string | DynamicValue): StyleRule {
       { [value.__id]: String(value.__value) },
     )
   }
-  return createRule({ fill: value })
+  return createRule({ fill: resolveColor(value) })
 }
 
 export function stroke(value: string | DynamicValue): StyleRule {
@@ -20,7 +21,7 @@ export function stroke(value: string | DynamicValue): StyleRule {
       { [value.__id]: String(value.__value) },
     )
   }
-  return createRule({ stroke: value })
+  return createRule({ stroke: resolveColor(value) })
 }
 
 export function strokeWidth(value: string | number | DynamicValue): StyleRule {

package/src/utilities/transforms.ts

@@ -2,6 +2,7 @@ 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'
 
 function transformRule(fn: string, value: string | number | DynamicValue): StyleRule {
   if (isDynamic(value)) {
@@ -50,11 +51,13 @@ export function rotate(value: string | DynamicValue): StyleRule {
   return transformRule('rotate', value)
 }
 
-export function translateX(value: string | DynamicValue): StyleRule {
+export function translateX(value: string | number | DynamicValue): StyleRule {
+  if (typeof value === 'number') return transformRule('translateX', resolveSpacing(value))
   return transformRule('translateX', value)
 }
 
-export function translateY(value: string | DynamicValue): StyleRule {
+export function translateY(value: string | number | DynamicValue): StyleRule {
+  if (typeof value === 'number') return transformRule('translateY', resolveSpacing(value))
   return transformRule('translateY', value)
 }
 

package/src/utilities/transitions.ts

@@ -2,6 +2,15 @@ import type { StyleRule } from '../types.ts'
 import type { DynamicValue } from '../dynamic.ts'
 import { createRule, createDynamicRule } from '../rule.ts'
 import { isDynamic } from '../dynamic.ts'
+import * as animations from '../theme/animations.ts'
+
+const animateMap: Record<string, string> = {
+  spin: animations.spin,
+  ping: animations.ping,
+  pulse: animations.pulse,
+  bounce: animations.bounce,
+  none: 'none',
+}
 
 export function transition(): StyleRule {
   return createRule({
@@ -94,5 +103,5 @@ export function animate(value: string | DynamicValue): StyleRule {
       { [value.__id]: String(value.__value) },
     )
   }
-  return createRule({ animation: value })
+  return createRule({ animation: animateMap[value] ?? value })
 }

package/src/utilities/typography.ts

@@ -3,6 +3,12 @@ import type { TextSize } from '../theme/typography.ts'
 import type { DynamicValue } from '../dynamic.ts'
 import { createRule, createDynamicRule } from '../rule.ts'
 import { isDynamic } from '../dynamic.ts'
+import { resolveColor } from './colors.ts'
+import { letterSpacings, lineHeights, fontFamilies } from '../theme/typography.ts'
+
+const trackingMap: Record<string, string> = { ...letterSpacings }
+const leadingMap: Record<string, string> = { ...lineHeights }
+const fontFamilyMap: Record<string, string> = { ...fontFamilies }
 
 /**
  * Sets the font size (and optionally line height) of an element.
@@ -132,7 +138,7 @@ export function tracking(value: string | DynamicValue): StyleRule {
       { [value.__id]: String(value.__value) },
     )
   }
-  return createRule({ 'letter-spacing': value })
+  return createRule({ 'letter-spacing': trackingMap[value] ?? value })
 }
 
 /**
@@ -166,14 +172,15 @@ export function tracking(value: string | DynamicValue): StyleRule {
  * // style: { '--twc-d0': lineHeight }
  * ```
  */
-export function leading(value: string | DynamicValue): StyleRule {
+export function leading(value: string | number | DynamicValue): StyleRule {
   if (isDynamic(value)) {
     return createDynamicRule(
       { 'line-height': `var(${value.__id})` },
       { [value.__id]: String(value.__value) },
     )
   }
-  return createRule({ 'line-height': value })
+  const v = typeof value === 'string' ? (leadingMap[value] ?? value) : String(value)
+  return createRule({ 'line-height': v })
 }
 
 /**
@@ -209,7 +216,7 @@ export function fontFamily(value: string | DynamicValue): StyleRule {
       { [value.__id]: String(value.__value) },
     )
   }
-  return createRule({ 'font-family': value })
+  return createRule({ 'font-family': fontFamilyMap[value] ?? value })
 }
 
 export function antialiased(): StyleRule {
@@ -302,7 +309,7 @@ export function textDecorationColor(value: string | DynamicValue): StyleRule {
       { [value.__id]: String(value.__value) },
     )
   }
-  return createRule({ 'text-decoration-color': value })
+  return createRule({ 'text-decoration-color': resolveColor(value) })
 }
 
 export function textDecorationStyle(value: string): StyleRule {