@tempoxyz/ds 0.2.0 → 0.2.4

package/src/web/components/Tabs.tsx

@@ -131,7 +131,7 @@ namespace styles {
   export const indicator = variants(
     {
       base: {
-        backgroundColor: 'light-dark(white, rgb(255 255 255 / 0.16)) !custom',
+        backgroundColor: 'background.indicator',
         boxShadow: 'raised',
         height: 'var(--active-tab-height) !custom',
         insetBlockStart: '0',
@@ -140,7 +140,7 @@ namespace styles {
         position: 'absolute',
         translate: 'var(--active-tab-left) var(--active-tab-top) !custom',
         // The indicator matches each tab's size, so it transitions width and height with its position.
-        transitionDuration: '240ms',
+        transitionDuration: '240',
         transitionProperty: 'height, translate, width',
         transitionTimingFunction: 'spring',
         width: 'var(--active-tab-width) !custom',
@@ -205,14 +205,14 @@ namespace styles {
       base: {
         marginBlockStart: '12',
         outlineColor: 'transparent !custom',
-        outlineOffset: '0px !custom',
+        outlineOffset: '0',
         outlineStyle: 'solid !custom',
-        outlineWidth: '2px !custom',
-        transitionDuration: '160ms',
+        outlineWidth: '2',
+        transitionDuration: '160',
         transitionProperty: 'outline-color, outline-offset',
         transitionTimingFunction: 'snappy',
         selectors: {
-          '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2px !custom' },
+          '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2' },
         },
         '@media (prefers-reduced-motion: reduce)': { transitionProperty: 'outline-color' },
       },
@@ -234,13 +234,13 @@ namespace styles {
         height: '100% !custom',
         justifyContent: 'center',
         outlineColor: 'transparent !custom',
-        outlineOffset: '0px !custom',
+        outlineOffset: '0',
         outlineStyle: 'solid !custom',
-        outlineWidth: '2px !custom',
+        outlineWidth: '2',
         paddingInline: '16',
         position: 'relative',
-        transitionDuration: '160ms',
-        transitionProperty: 'color, outline-color, outline-offset, transform',
+        transitionDuration: '160',
+        transitionProperty: 'color, outline-color, outline-offset, scale',
         transitionTimingFunction: 'snappy',
         // Weight overrides the typography token, so it stays after it.
         typography: 'button.14',
@@ -248,15 +248,15 @@ namespace styles {
         whiteSpace: 'nowrap',
         zIndex: '1 !custom',
         selectors: {
-          '&:active:not([data-disabled])': { transform: 'scale(0.97) !custom' },
-          '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2px !custom' },
+          '&:active:not([data-disabled])': { scale: 'press' },
+          '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2' },
           '&:hover:not([data-disabled])': { color: 'foreground' },
           '&[data-active]': { color: 'foreground' },
-          '&[data-disabled]': { cursor: 'default', opacity: '0.4 !custom' },
+          '&[data-disabled]': { cursor: 'default', opacity: 'disabled' },
         },
         '@media (prefers-reduced-motion: reduce)': {
           transitionProperty: 'color, outline-color',
-          selectors: { '&:active:not([data-disabled])': { transform: 'none !custom' } },
+          selectors: { '&:active:not([data-disabled])': { scale: 'none !custom' } },
         },
       },
     },

package/src/web/components/Tag.tsx

@@ -65,8 +65,8 @@ namespace styles {
       backgroundColor: 'currentColor !custom',
       borderRadius: 'full',
       flexShrink: '0 !custom',
-      height: '6px !custom',
-      width: '6px !custom',
+      height: '6',
+      width: '6',
     },
     { id: 'tds/web/tag/dot' },
   )
@@ -78,7 +78,7 @@ namespace styles {
         border: '1px solid !custom',
         borderColor: 'transparent !custom',
         boxSizing: 'border-box',
-        columnGap: '6px !custom',
+        columnGap: '6',
         display: 'inline-flex',
         height: '24',
         paddingInline: '8',
@@ -90,26 +90,26 @@ namespace styles {
           '&:is(button, a)': {
             cursor: 'pointer',
             outlineColor: 'transparent !custom',
-            outlineOffset: '0px !custom',
+            outlineOffset: '0',
             outlineStyle: 'solid !custom',
-            outlineWidth: '2px !custom',
+            outlineWidth: '2',
             textDecoration: 'none !custom',
-            transitionDuration: '160ms',
-            transitionProperty: 'opacity, outline-color, outline-offset, transform',
+            transitionDuration: '160',
+            transitionProperty: 'opacity, outline-color, outline-offset, scale',
             transitionTimingFunction: 'snappy',
           },
-          '&:is(button, a):active': { transform: 'scale(0.98) !custom' },
+          '&:is(button, a):active': { scale: 'press' },
           '&:is(button, a):focus-visible': {
             outlineColor: 'blue.700',
-            outlineOffset: '2px !custom',
+            outlineOffset: '2',
           },
           '&:is(button, a):hover': { opacity: '0.8 !custom' },
-          '&:is(button):disabled': { cursor: 'default', opacity: '0.4 !custom' },
+          '&:is(button):disabled': { cursor: 'default', opacity: 'disabled' },
         },
         '@media (prefers-reduced-motion: reduce)': {
           selectors: {
             '&:is(button, a)': { transitionProperty: 'opacity, outline-color' },
-            '&:is(button, a):active': { transform: 'none !custom' },
+            '&:is(button, a):active': { scale: 'none !custom' },
           },
         },
       },
@@ -139,7 +139,7 @@ namespace styles {
         size: {
           large: { height: '32', paddingInline: '12', typography: 'label.14' },
           medium: {},
-          small: { height: '20', paddingInline: '6px !custom' },
+          small: { height: '20', paddingInline: '6' },
         },
         variant: { outlined: {}, plain: {}, soft: {} },
       },

package/src/web/components/Textarea.tsx

@@ -60,25 +60,25 @@ namespace styles {
         backgroundColor: 'grayAlpha.100',
         borderColor: 'transparent !custom',
         borderStyle: 'solid',
-        borderWidth: '2px !custom',
+        borderWidth: '2',
         boxSizing: 'border-box',
         color: 'foreground',
         display: 'block',
         outlineColor: 'transparent !custom',
-        outlineOffset: '2px !custom',
+        outlineOffset: '2',
         outlineStyle: 'solid !custom',
-        outlineWidth: '2px !custom',
-        transitionDuration: '160ms !custom',
+        outlineWidth: '2',
+        transitionDuration: '160',
         transitionProperty: 'background-color, border-color, opacity, outline-color !custom',
         transitionTimingFunction: 'snappy',
         width: '100% !custom',
         selectors: {
-          '&:disabled': { opacity: '0.4 !custom' },
+          '&:disabled': { opacity: 'disabled' },
           '&:focus-visible': { outlineColor: 'blue.700' },
           '&:hover:not(:disabled)': { backgroundColor: 'grayAlpha.200' },
           '&::placeholder': {
-            color: 'grayAlpha.700',
-            transitionDuration: '160ms !custom',
+            color: 'grayAlpha.900',
+            transitionDuration: '160',
             transitionProperty: 'opacity !custom',
             transitionTimingFunction: 'snappy',
           },
@@ -94,13 +94,13 @@ namespace styles {
           },
           '&[data-variant="card"][data-size="large"]': { borderRadius: '16', padding: '24' },
           // The first line sits below the floating label, as in a stacked Input of the same size.
-          '[data-variant="stacked"] > &': { gridArea: '1 / 1', paddingTop: '14px !custom' },
-          '[data-variant="stacked"] > &[data-size="large"]': { paddingTop: '22px !custom' },
+          '[data-variant="stacked"] > &': { gridArea: '1 / 1', paddingTop: '14' },
+          '[data-variant="stacked"] > &[data-size="large"]': { paddingTop: '22' },
           // A small stacked field takes the medium size, as Input does.
           '[data-variant="stacked"] > &[data-size="small"]': {
             borderRadius: '12',
             paddingBottom: '8',
-            paddingInline: '14px !custom',
+            paddingInline: '14',
             typography: 'copy.14',
           },
           '[data-variant="stacked"]:not([data-focused]) &::placeholder': { opacity: '0 !custom' },
@@ -125,20 +125,20 @@ namespace styles {
         size: {
           large: {
             borderRadius: '16',
-            paddingBlock: '14px !custom',
-            paddingInline: '18px !custom',
+            paddingBlock: '14',
+            paddingInline: '18',
             typography: 'copy.16',
           },
           medium: {
             borderRadius: '12',
             paddingBlock: '8',
-            paddingInline: '14px !custom',
+            paddingInline: '14',
             typography: 'copy.14',
           },
           small: {
             borderRadius: '8',
             paddingBlock: '5px !custom',
-            paddingInline: '10px !custom',
+            paddingInline: '10',
             typography: 'copy.13',
           },
         },
@@ -148,7 +148,7 @@ namespace styles {
             borderColor: 'grayAlpha.200',
             borderRadius: '12',
             borderStyle: 'solid',
-            borderWidth: '1px !custom',
+            borderWidth: '1',
             padding: '16',
             selectors: {
               '&:hover:not(:disabled)': {

package/src/web/components/Toast.tsx

@@ -1,7 +1,11 @@
 import * as BaseUi from '@base-ui/react/toast'
 import type { ComponentPropsWithRef, ReactNode } from 'react'
 import type * as zyzz from 'zyzz'
-import { AlertCircle, AlertTriangle, CheckCircle, Close, InfoCircle } from '../icons/index.js'
+import { AlertCircle } from '../icons/AlertCircle.js'
+import { AlertTriangle } from '../icons/AlertTriangle.js'
+import { CheckCircle } from '../icons/CheckCircle.js'
+import { Close } from '../icons/Close.js'
+import { InfoCircle } from '../icons/InfoCircle.js'
 import { style, variants } from '../zyzz.config.js'
 
 const icons = {
@@ -158,20 +162,23 @@ namespace styles {
       // Weight overrides the typography token, so it stays after it.
       typography: 'button.12',
       outlineColor: 'transparent !custom',
-      outlineOffset: '0px !custom',
+      outlineOffset: '0',
       outlineStyle: 'solid !custom',
-      outlineWidth: '2px !custom',
-      transitionDuration: '160ms',
-      transitionProperty: 'background-color, outline-color, outline-offset, transform',
+      outlineWidth: '2',
+      transitionDuration: '160',
+      transitionProperty: 'background-color, outline-color, outline-offset, scale',
       transitionTimingFunction: 'snappy',
       selectors: {
-        '&:active': { backgroundColor: 'grayAlpha.300', transform: 'scale(0.97) !custom' },
-        '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2px !custom' },
+        '&:active': {
+          backgroundColor: 'grayAlpha.300',
+          scale: 'press',
+        },
+        '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2' },
         '&:hover': { backgroundColor: 'grayAlpha.200' },
       },
       '@media (prefers-reduced-motion: reduce)': {
         transitionProperty: 'background-color, outline-color',
-        selectors: { '&:active': { transform: 'none !custom' } },
+        selectors: { '&:active': { scale: 'none !custom' } },
       },
     },
     { id: 'tds/web/toast/action' },
@@ -204,20 +211,20 @@ namespace styles {
       padding: '0',
       width: '24',
       outlineColor: 'transparent !custom',
-      outlineOffset: '0px !custom',
+      outlineOffset: '0',
       outlineStyle: 'solid !custom',
-      outlineWidth: '2px !custom',
-      transitionDuration: '160ms',
-      transitionProperty: 'background-color, outline-color, outline-offset, transform',
+      outlineWidth: '2',
+      transitionDuration: '160',
+      transitionProperty: 'background-color, outline-color, outline-offset, scale',
       transitionTimingFunction: 'snappy',
       selectors: {
-        '&:active': { transform: 'scale(0.97) !custom' },
-        '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2px !custom' },
+        '&:active': { scale: 'press' },
+        '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2' },
         '&:hover': { backgroundColor: 'grayAlpha.100' },
       },
       '@media (prefers-reduced-motion: reduce)': {
         transitionProperty: 'background-color, outline-color',
-        selectors: { '&:active': { transform: 'none !custom' } },
+        selectors: { '&:active': { scale: 'none !custom' } },
       },
     },
     { id: 'tds/web/toast/close' },
@@ -233,7 +240,7 @@ namespace styles {
       overflow: 'hidden',
       paddingBlock: '16',
       paddingInline: '20',
-      transitionDuration: '200ms',
+      transitionDuration: '200',
       transitionProperty: 'opacity',
       transitionTimingFunction: 'snappy',
       selectors: {
@@ -280,7 +287,7 @@ namespace styles {
         'translateX(var(--toast-swipe-movement-x)) translateY(calc(var(--toast-swipe-movement-y) - var(--toast-index) * 12px - (1 - max(0, calc(1 - var(--toast-index) * 0.1))) * var(--toast-frontmost-height, var(--toast-height)))) scale(max(0, calc(1 - var(--toast-index) * 0.1))) !custom',
       transformOrigin: 'bottom center !custom',
       // Height follows the frontmost toast as the stack collapses, which a transform cannot express.
-      transitionDuration: '320ms, 320ms, 150ms',
+      transitionDuration: '320ms, 320ms, 150ms !custom',
       transitionProperty: 'transform, opacity, height',
       transitionTimingFunction: 'spring',
       userSelect: 'none',
@@ -288,7 +295,7 @@ namespace styles {
       selectors: {
         '&::after': {
           content: '"" !custom',
-          height: '13px !custom',
+          height: '14',
           insetBlockStart: '100% !custom',
           insetInline: '0',
           position: 'absolute',
@@ -303,7 +310,7 @@ namespace styles {
           opacity: '0 !custom',
           transform: 'translateY(150%) !custom',
         },
-        '&[data-ending-style]': { transitionDuration: '200ms, 200ms, 150ms' },
+        '&[data-ending-style]': { transitionDuration: '200ms, 200ms, 150ms !custom' },
         '&[data-ending-style][data-swipe-direction="down"]': {
           transform: 'translateY(calc(var(--toast-swipe-movement-y) + 150%)) !custom',
         },
@@ -317,7 +324,7 @@ namespace styles {
           transform: 'translateY(calc(var(--toast-swipe-movement-y) - 150%)) !custom',
         },
         // The toast follows the pointer without lag while swiping.
-        '&[data-swiping]': { transitionDuration: '0ms' },
+        '&[data-swiping]': { transitionDuration: '0' },
       },
       '@media (prefers-reduced-motion: reduce)': { transitionProperty: 'opacity' },
     },
@@ -336,7 +343,7 @@ namespace styles {
       margin: 'auto !custom',
       maxWidth: '384',
       position: 'fixed',
-      zIndex: '1000 !custom',
+      zIndex: 'toast',
       '@media (min-width: 40rem)': {
         insetInlineStart: 'auto !custom',
         margin: '0',

package/src/web/components/Tooltip.tsx

@@ -103,31 +103,34 @@ namespace styles {
       boxSizing: 'border-box',
       color: 'background.primary',
       maxWidth: '320',
-      paddingBlock: '6px !custom',
+      paddingBlock: '6',
       paddingInline: '12',
       transformOrigin: 'var(--transform-origin) !custom',
-      transitionDuration: '160ms',
-      transitionProperty: 'opacity, transform',
+      transitionDuration: '160',
+      transitionProperty: 'opacity, scale',
       transitionTimingFunction: 'snappy',
       typography: 'label.13',
       selectors: {
         '&[data-ending-style]': {
           opacity: '0 !custom',
-          transform: 'scale(0.96) !custom',
-          transitionDuration: '100ms',
+          scale: 'enter',
+          transitionDuration: '100',
+        },
+        '&[data-instant]': { transitionDuration: '0' },
+        '&[data-starting-style]': {
+          opacity: '0 !custom',
+          scale: 'enter',
         },
-        '&[data-instant]': { transitionDuration: '0ms' },
-        '&[data-starting-style]': { opacity: '0 !custom', transform: 'scale(0.96) !custom' },
       },
       '@media (prefers-reduced-motion: reduce)': {
         transitionProperty: 'opacity',
         selectors: {
-          '&[data-ending-style], &[data-starting-style]': { transform: 'none !custom' },
+          '&[data-ending-style], &[data-starting-style]': { scale: 'none !custom' },
         },
       },
     },
     { id: 'tds/web/tooltip/popup' },
   )
 
-  export const positioner = style({ zIndex: '50 !custom' }, { id: 'tds/web/tooltip/positioner' })
+  export const positioner = style({ zIndex: 'popover' }, { id: 'tds/web/tooltip/positioner' })
 }

package/src/web/components/internal/Field.ts

@@ -14,12 +14,12 @@ export namespace styles {
         display: 'flex',
         justifyContent: 'space-between',
         outlineColor: 'transparent !custom',
-        outlineOffset: '2px !custom',
+        outlineOffset: '2',
         outlineStyle: 'solid !custom',
-        outlineWidth: '2px !custom',
+        outlineWidth: '2',
         position: 'relative',
         textAlign: 'start',
-        transitionDuration: '160ms !custom',
+        transitionDuration: '160',
         transitionProperty: 'background-color, border-color, opacity, outline-color !custom',
         transitionTimingFunction: 'snappy',
         width: '100% !custom',
@@ -29,19 +29,19 @@ export namespace styles {
             borderColor: 'transparent !custom',
             borderRadius: 'inherit !custom',
             borderStyle: 'solid !custom',
-            borderWidth: '2px !custom',
+            borderWidth: '2',
             boxSizing: 'border-box',
             content: '"" !custom',
             inset: '0',
             pointerEvents: 'none',
             position: 'absolute',
-            transitionDuration: '160ms !custom',
+            transitionDuration: '160',
             transitionProperty: 'border-color !custom',
             transitionTimingFunction: 'snappy',
           },
           '&:is(button)': { cursor: 'pointer' },
           '&:focus-visible, &:has(:focus-visible)': { outlineColor: 'blue.700' },
-          '&[data-disabled], &:disabled': { opacity: '0.4 !custom' },
+          '&[data-disabled], &:disabled': { opacity: 'disabled' },
           '&:is([aria-invalid="true"], [data-invalid], :has([aria-invalid="true"]))::before': {
             borderColor: 'red.800',
           },
@@ -73,7 +73,7 @@ export namespace styles {
           large: { columnGap: '12', minHeight: '56', paddingInline: '20', typography: 'copy.16' },
           medium: { columnGap: '8', minHeight: '40', paddingInline: '16', typography: 'copy.14' },
           small: {
-            columnGap: '6px !custom',
+            columnGap: '6',
             minHeight: '32',
             paddingInline: '12',
             typography: 'copy.13',
@@ -124,18 +124,18 @@ export namespace styles {
       height: '36',
       justifyContent: 'center',
       outlineColor: 'transparent !custom',
-      outlineOffset: '2px !custom',
+      outlineOffset: '2',
       outlineStyle: 'solid !custom',
-      outlineWidth: '2px !custom',
+      outlineWidth: '2',
       padding: '0',
-      transitionDuration: '160ms !custom',
+      transitionDuration: '160',
       transitionProperty: 'background-color, color, opacity, outline-color, transform !custom',
       transitionTimingFunction: 'snappy',
       width: '36',
       selectors: {
         '&:active:not(:disabled)': {
           transform: 'scale(0.92) !custom',
-          transitionDuration: '100ms !custom',
+          transitionDuration: '100',
         },
         '&:disabled': { cursor: 'default' },
         '&:focus-visible': { outlineColor: 'blue.700' },
@@ -145,23 +145,23 @@ export namespace styles {
           transform: 'scale(0.6) !custom',
         },
         '& > svg': {
-          transitionDuration: '200ms !custom',
+          transitionDuration: '200',
           transitionProperty: 'transform !custom',
           transitionTimingFunction: 'spring',
         },
         '&[data-popup-open] > svg': { transform: 'rotate(180deg) !custom' },
         // Adjacent buttons touch, so their icons sit close together.
-        '[data-size="large"] > & + &': { marginInlineStart: '-12px !custom' },
-        '[data-size="medium"] > & + &': { marginInlineStart: '-8px !custom' },
-        '[data-size="small"] > & + &': { marginInlineStart: '-6px !custom' },
-        '[data-size="large"] > &:last-child': { marginInlineEnd: '-10px !custom' },
+        '[data-size="large"] > & + &': { marginInlineStart: '-12' },
+        '[data-size="medium"] > & + &': { marginInlineStart: '-8' },
+        '[data-size="small"] > & + &': { marginInlineStart: '-6' },
+        '[data-size="large"] > &:last-child': { marginInlineEnd: '-10' },
         '[data-size="large"][data-variant="outlined"] > &:last-child': {
-          marginInlineEnd: '-14px !custom',
+          marginInlineEnd: '-14',
         },
         '[data-size="medium"] > &': { fontSize: '14', height: '28', width: '28' },
-        '[data-size="medium"] > &:last-child': { marginInlineEnd: '-10px !custom' },
+        '[data-size="medium"] > &:last-child': { marginInlineEnd: '-10' },
         '[data-size="small"] > &': { fontSize: '12', height: '24', width: '24' },
-        '[data-size="small"] > &:last-child': { marginInlineEnd: '-8px !custom' },
+        '[data-size="small"] > &:last-child': { marginInlineEnd: '-8' },
         '[data-variant="filled"]:is([data-size="large"], [data-size="medium"]) > &': {
           borderRadius: '6',
         },
@@ -198,7 +198,7 @@ export namespace styles {
       padding: '0',
       // A zero width drops the input's intrinsic size from the field's min-content width.
       width: '0',
-      selectors: { '&::placeholder': { color: 'gray.700' } },
+      selectors: { '&::placeholder': { color: 'gray.900' } },
     },
     { id: 'tds/web/select-field/input' },
   )

package/src/web/components/internal/InputGroup.ts

@@ -1,4 +1,4 @@
-import { type RefObject, createContext, useLayoutEffect, useRef } from 'react'
+import { createContext, type RefObject, useLayoutEffect, useRef } from 'react'
 import { keyframes } from 'zyzz/web'
 import { variants, vars } from '../../zyzz.config.js'
 
@@ -93,13 +93,12 @@ export namespace styles {
         color: 'foreground',
         display: 'flex',
         outlineColor: 'transparent !custom',
-        outlineOffset: '2px !custom',
+        outlineOffset: '2',
         outlineStyle: 'solid !custom',
-        outlineWidth: '2px !custom',
+        outlineWidth: '2',
         position: 'relative',
-        transitionDuration: '160ms !custom',
-        transitionProperty:
-          'background-color, border-color, opacity, outline-color, transform !custom',
+        transitionDuration: '160',
+        transitionProperty: 'background-color, border-color, opacity, outline-color, scale !custom',
         transitionTimingFunction: 'snappy',
         selectors: {
           // The invalid ring fades in on an inset border, so focus changes only the outline color.
@@ -107,13 +106,13 @@ export namespace styles {
             borderColor: 'transparent !custom',
             borderRadius: 'inherit !custom',
             borderStyle: 'solid !custom',
-            borderWidth: '2px !custom',
+            borderWidth: '2',
             boxSizing: 'border-box',
             content: '"" !custom',
             inset: '0',
             pointerEvents: 'none',
             position: 'absolute',
-            transitionDuration: '160ms !custom',
+            transitionDuration: '160',
             transitionProperty: 'border-color !custom',
             transitionTimingFunction: 'snappy',
           },
@@ -124,15 +123,15 @@ export namespace styles {
             width: '100% !custom',
           },
           '&:is(button):active:not(:disabled, [data-disabled])': {
-            transform: 'scale(0.98) !custom',
-            transitionDuration: '100ms !custom',
+            scale: 'press',
+            transitionDuration: '100',
           },
           '&:hover:not(:disabled, [data-disabled], :has(input:disabled))': {
             backgroundColor: 'grayAlpha.200',
           },
           '&:disabled, &[data-disabled], &:has(input:disabled)': {
             cursor: 'default',
-            opacity: '0.4 !custom',
+            opacity: 'disabled',
           },
           '&:focus-visible, &:has(input:focus-visible)': { outlineColor: 'blue.700' },
           // Success and invalid draw one ring: inset at rest, and the outline instead while focused.
@@ -185,7 +184,7 @@ export namespace styles {
         '@media (prefers-reduced-motion: reduce)': {
           transitionProperty: 'background-color, border-color, opacity, outline-color !custom',
           selectors: {
-            '&:active': { transform: 'none !custom' },
+            '&:active': { scale: 'none !custom' },
             '&[data-entered]': { animation: 'none !custom' },
           },
         },
@@ -209,7 +208,7 @@ export namespace styles {
           },
           small: {
             borderRadius: '8',
-            columnGap: '6px !custom',
+            columnGap: '6',
             height: '32',
             paddingInline: '12',
             typography: 'copy.13',
@@ -222,7 +221,7 @@ export namespace styles {
             borderColor: 'grayAlpha.200',
             borderRadius: '12',
             borderStyle: 'solid',
-            borderWidth: '1px !custom',
+            borderWidth: '1',
             height: 'auto !custom',
             minHeight: '56',
             paddingBlock: '16',