feat: move tabular nums to variant

magicbell · Jan 30, 2025 · 771e01e · 771e01e
1 parent 9342408
commit 771e01e
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 4 deletions.
diff --git a/.changeset/twenty-turkeys-tickle.md b/.changeset/twenty-turkeys-tickle.md
@@ -0,0 +1,5 @@
+---
+'@darkmagic/react': minor
+---
+
+move tabular nums to a variant
diff --git a/packages/react/src/components/input.tsx b/packages/react/src/components/input.tsx
@@ -9,7 +9,6 @@ const StyledRoot = styled('div', {
   fontFamily: 'inherit',
   width: '100%',
   WebkitTapHighlightColor: 'rgba(0,0,0,0)',
-  fontVariantNumeric: 'tabular-nums',
   display: 'inline-flex',
   alignItems: 'center',
   justifyContent: 'space-between',
@@ -34,6 +33,11 @@ const StyledRoot = styled('div', {
   '&:-webkit-autofill::first-line': { color: '$text-highlight' },
 
   variants: {
+    numeric: {
+      true: {
+        fontVariantNumeric: 'tabular-nums',
+      },
+    },
     size: {
       sm: {
         height: '$8',
@@ -67,7 +71,7 @@ const StyledInput = styled('input', {
   width: '100%',
   height: '100%',
   WebkitTapHighlightColor: 'rgba(0,0,0,0)',
-  fontVariantNumeric: 'tabular-nums',
+  fontVariantNumeric: 'inherit',
   backgroundColor: 'transparent',
   color: 'inherit',
   padding: '0 $1',

diff --git a/packages/react/src/components/textarea.tsx b/packages/react/src/components/textarea.tsx
@@ -15,7 +15,6 @@ const StyledTextArea = styled('textarea', {
   width: '100%',
   WebkitTapHighlightColor: 'rgba(0,0,0,0)',
   boxShadow: 'none',
-  fontVariantNumeric: 'tabular-nums',
   position: 'relative',
   resize: 'none',
   border: '1px solid transparent',
@@ -39,6 +38,11 @@ const StyledTextArea = styled('textarea', {
   },
 
   variants: {
+    numeric: {
+      true: {
+        fontVariantNumeric: 'tabular-nums',
+      },
+    },
     size: {
       xs: {
         minHeight: '$10',

diff --git a/packages/react/src/components/typography.tsx b/packages/react/src/components/typography.tsx
@@ -6,10 +6,14 @@ const StyledTypography = styled('div', {
   lineHeight: '1',
   margin: '0',
   fontWeight: 400,
-  fontVariantNumeric: 'tabular-nums',
   display: 'block',
 
   variants: {
+    numeric: {
+      true: {
+        fontVariantNumeric: 'tabular-nums',
+      },
+    },
     noWrap: {
       true: {
         whiteSpace: 'nowrap',