feat: ✨ adds built-in border width variables and parsing

css/core.css

@@ -2,6 +2,10 @@
     --measure: 60ch;
     --ratio: 1.25; /* Major Third */
 
+    --border-sm: .125rem;
+    --border-md: calc(var(--border-sm) * var(--ratio) * var(--ratio));
+    --border-lg: calc(var(--border-md) * var(--ratio) * var(--ratio));
+
     --gap-4xs: calc(var(--gap-3xs) / var(--ratio));
     --gap-3xs: calc(var(--gap-2xs) / var(--ratio));
     --gap-2xs: calc(var(--gap-xs) / var(--ratio));

src/borders.ts

@@ -0,0 +1,18 @@
+import { isCssLength } from './css.js'
+import type { CSSLength } from './css.js'
+
+const Widths = {
+    'sm': 'var(--border-sm)',
+    'md': 'var(--border-md)',
+    'lg': 'var(--border-lg)'
+}
+
+export type BorderWidth = keyof typeof Widths | CSSLength | number
+
+export function parseBorderWidth(width: BorderWidth): CSSLength {
+    return typeof width === 'number' ? `${width}px`
+        // @ts-ignore
+        : width in Widths ? Widths[width]
+        : isCssLength(width) ? width
+        : '0px'
+}

src/gaps.ts

@@ -19,7 +19,7 @@ export type GapSize = keyof typeof Gaps
 
 export type Gap = GapSize | CSSLength | number
 
-export function parseGap(gap: Gap | unknown): CSSLength | undefined {
+export function parseGap(gap: Gap | unknown): CSSLength {
   if (typeof gap === 'number') return `${gap}px`
 
   if (typeof gap === 'string') {

src/index.ts

@@ -1,3 +1,4 @@
+export * from './borders.js'
 export * from './colors.js'
 export * from './css.js'
 export * from './gaps.js'

tests/borders.ts

@@ -0,0 +1,27 @@
+import { suite } from 'uvu'
+import * as assert from 'uvu/assert'
+import { parseBorderWidth, BorderWidth } from '../src/borders.js'
+
+const Borders = suite('borders')
+
+console.log(parseBorderWidth('thin'))
+
+Borders('CSS border variables', () => {
+  assert.type(parseBorderWidth, 'function', 'parseBorderWidth is a function')
+  assert.is(parseBorderWidth(10), '10px', 'converts numbers to pixels')
+  assert.is(parseBorderWidth('10vw'), '10vw', 'returns valid CSS lengths unchanged')
+  assert.is(parseBorderWidth('10abc' as any), '0px', 'ignores invalid CSS length strings')
+  assert.is(parseBorderWidth('thicker' as any), '0px', 'ignores unknown border width variables')
+
+  const cases: [BorderWidth, string, string][] = [
+    'sm',
+    'md',
+    'lg',
+  ].map(size => [size, `var(--border-${size})`, `border size "${size}"`])
+
+  for (const [value, expected, message] of cases) {
+    assert.is(parseBorderWidth(value), expected, message)
+  }
+})
+
+Borders.run()