@tempoxyz/ds 0.2.2 → 0.2.5

package/src/web/components/Surface.tsx

@@ -1,7 +1,7 @@
 import { useRender } from '@base-ui/react/use-render'
 import type { ComponentPropsWithRef } from 'react'
 import type * as zyzz from 'zyzz'
-import { variants } from '../zyzz.config.js'
+import { variants, vars } from '../zyzz.config.js'
 
 /**
  * A card container that renders a `div` by default. Pass `render` to swap the element, such as a
@@ -11,7 +11,7 @@ import { variants } from '../zyzz.config.js'
  * - `size` sets the corner radius and padding together.
  * - Name the card with `Surface.Title`, which renders an `h2`, so headings keep the card navigable.
  * - A pressable surface should hold no other interactive controls, since nested targets conflict.
- * - A direct child `table` or `Rows` bleeds into the inline padding, so row fills reach the edges.
+ * - A direct child `table` or `Rows` bleeds into the padding, so row fills reach the edges.
  *
  * @example
  * <Surface>
@@ -123,18 +123,18 @@ namespace styles {
           // A trailing text button bleeds by its inline padding, so its label aligns with the content
           // edge, but never past the surface padding.
           '& > [data-variant="text"]:not([data-shape="icon"]):last-child': {
-            marginInlineEnd: '-20px !custom',
+            marginInlineEnd: '-20',
           },
           '& > [data-variant="text"][data-size="small"]:not([data-shape="icon"]):last-child': {
-            marginInlineEnd: '-12px !custom',
+            marginInlineEnd: '-12',
           },
           '& > [data-variant="text"][data-size="large"]:not([data-shape="icon"]):last-child': {
-            marginInlineEnd: '-24px !custom',
+            marginInlineEnd: '-24',
           },
           '[data-surface-size="medium"] > & > [data-variant="text"]:is([data-size="medium"], [data-size="large"]):not([data-shape="icon"]):last-child':
-            { marginInlineEnd: '-16px !custom' },
+            { marginInlineEnd: '-16' },
           '[data-surface-size="small"] > & > [data-variant="text"]:is([data-size="medium"], [data-size="large"]):not([data-shape="icon"]):last-child':
-            { marginInlineEnd: '-12px !custom' },
+            { marginInlineEnd: '-12' },
         },
       },
     },
@@ -158,15 +158,15 @@ namespace styles {
             cursor: 'pointer',
             font: 'inherit !custom',
             outlineColor: 'transparent !custom',
-            outlineOffset: '2px !custom',
+            outlineOffset: '2',
             outlineStyle: 'solid !custom',
-            outlineWidth: '2px !custom',
+            outlineWidth: '2',
             padding: '0',
             textDecorationColor: 'transparent !custom',
             textDecorationLine: 'underline !custom',
             textDecorationThickness: '1px !custom',
             textUnderlineOffset: '4px !custom',
-            transitionDuration: '160ms',
+            transitionDuration: '160',
             transitionProperty: 'color, outline-color, text-decoration-color',
             transitionTimingFunction: 'snappy',
           },
@@ -187,12 +187,12 @@ namespace styles {
         color: 'foreground',
         display: 'block',
         outlineColor: 'transparent !custom',
-        outlineOffset: '0px !custom',
+        outlineOffset: '0',
         outlineStyle: 'solid !custom',
-        outlineWidth: '2px !custom',
+        outlineWidth: '2',
         textAlign: 'start',
-        transitionDuration: '160ms',
-        transitionProperty: 'background-color, opacity, outline-color, outline-offset, transform',
+        transitionDuration: '160',
+        transitionProperty: 'background-color, opacity, outline-color, outline-offset, scale',
         transitionTimingFunction: 'snappy',
         typography: 'copy.14',
         selectors: {
@@ -207,11 +207,11 @@ namespace styles {
           },
           '&:is(button, a[href], [role="button"]):active:not(:disabled, [aria-disabled="true"])': {
             backgroundColor: 'gray.200',
-            transform: 'scale(0.99) !custom',
+            scale: 'press',
           },
           '&:is(button, a[href], [role="button"]):focus-visible': {
             outlineColor: 'blue.700',
-            outlineOffset: '2px !custom',
+            outlineOffset: '2',
           },
           // Edge-to-edge row fills would otherwise cross the rounded corners. A table clips rather
           // than hides its overflow, so a sticky header still sticks to the scrolling ancestor.
@@ -227,14 +227,14 @@ namespace styles {
             height: 'auto !custom',
           },
           '& > table[data-size="large"]:last-child:not(:has(> caption)) > tbody > tr:last-child > td':
-            { paddingBlockStart: '18px !custom' },
+            { paddingBlockStart: '18' },
           '& > table[data-size="medium"]:last-child:not(:has(> caption)) > tbody > tr:last-child > td':
-            { paddingBlockStart: '10px !custom' },
+            { paddingBlockStart: '10' },
           '& > table[data-size="small"]:last-child:not(:has(> caption)) > tbody > tr:last-child > td':
-            { paddingBlockStart: '6px !custom' },
+            { paddingBlockStart: '6' },
           '&:disabled, &[aria-disabled="true"]': {
             cursor: 'default',
-            opacity: '0.4 !custom',
+            opacity: 'disabled',
             pointerEvents: 'none',
           },
         },
@@ -242,7 +242,7 @@ namespace styles {
           transitionProperty: 'background-color, opacity, outline-color',
           selectors: {
             '&:is(button, a[href], [role="button"]):active:not(:disabled, [aria-disabled="true"])':
-              { transform: 'none !custom' },
+              { scale: 'none !custom' },
           },
         },
       },
@@ -251,29 +251,31 @@ namespace styles {
         // Padding is one and a half times the radius, and they scale together. A direct child
         // table or Rows bleeds into the inline padding so fills reach the edges. Table cells at the
         // edges take back exactly the padding, so their text aligns with the content edge, while rows
-        // keep their own side padding. Rows also take half the block padding, since each row brings
-        // its own.
+        // keep their own side padding. Rows at the top or bottom edge take the full block padding,
+        // since each row brings its own, and take half beside other content.
         size: {
           large: {
             borderRadius: '16',
             padding: '24',
             selectors: {
-              '& > table, & > [data-rows]': { marginInline: '-24px !custom' },
-              '& > [data-rows]': { marginBlock: '-12px !custom' },
-              '& > table': { width: 'calc(100% + 48px) !custom' },
+              '& > table, & > [data-rows]': { marginInline: '-24' },
+              '& > [data-rows]': { marginBlock: '-12' },
+              '& > [data-rows]:first-child': { marginBlockStart: '-24' },
+              '& > [data-rows]:last-child': { marginBlockEnd: '-24' },
+              '& > table': { width: `calc(100% + ${vars.spacing['48']}) !custom` },
               '& > table > caption, & > table tr > :first-child': {
-                paddingInlineStart: '24px !custom',
+                paddingInlineStart: '24',
               },
-              '& > table tr > :last-child': { paddingInlineEnd: '24px !custom' },
-              '& > table:first-child:has(> thead)': { marginBlockStart: '-24px !custom' },
+              '& > table tr > :last-child': { paddingInlineEnd: '24' },
+              '& > table:first-child:has(> thead)': { marginBlockStart: '-24' },
               '& > table:first-child > thead > tr:first-child > th': {
-                paddingBlockStart: '24px !custom',
+                paddingBlockStart: '24',
               },
               '& > table:last-child:not(:has(> caption))': {
-                marginBlockEnd: '-24px !custom',
+                marginBlockEnd: '-24',
               },
               '& > table:last-child:not(:has(> caption)) > tbody > tr:last-child > td': {
-                paddingBlockEnd: '24px !custom',
+                paddingBlockEnd: '24',
               },
             },
           },
@@ -281,22 +283,24 @@ namespace styles {
             borderRadius: '12',
             padding: '16',
             selectors: {
-              '& > table, & > [data-rows]': { marginInline: '-16px !custom' },
-              '& > [data-rows]': { marginBlock: '-8px !custom' },
-              '& > table': { width: 'calc(100% + 32px) !custom' },
+              '& > table, & > [data-rows]': { marginInline: '-16' },
+              '& > [data-rows]': { marginBlock: '-8' },
+              '& > [data-rows]:first-child': { marginBlockStart: '-16' },
+              '& > [data-rows]:last-child': { marginBlockEnd: '-16' },
+              '& > table': { width: `calc(100% + ${vars.spacing['32']}) !custom` },
               '& > table > caption, & > table tr > :first-child': {
-                paddingInlineStart: '16px !custom',
+                paddingInlineStart: '16',
               },
-              '& > table tr > :last-child': { paddingInlineEnd: '16px !custom' },
-              '& > table:first-child:has(> thead)': { marginBlockStart: '-16px !custom' },
+              '& > table tr > :last-child': { paddingInlineEnd: '16' },
+              '& > table:first-child:has(> thead)': { marginBlockStart: '-16' },
               '& > table:first-child > thead > tr:first-child > th': {
-                paddingBlockStart: '16px !custom',
+                paddingBlockStart: '16',
               },
               '& > table:last-child:not(:has(> caption))': {
-                marginBlockEnd: '-16px !custom',
+                marginBlockEnd: '-16',
               },
               '& > table:last-child:not(:has(> caption)) > tbody > tr:last-child > td': {
-                paddingBlockEnd: '16px !custom',
+                paddingBlockEnd: '16',
               },
             },
           },
@@ -304,22 +308,24 @@ namespace styles {
             borderRadius: '8',
             padding: '12',
             selectors: {
-              '& > table, & > [data-rows]': { marginInline: '-12px !custom' },
-              '& > [data-rows]': { marginBlock: '-6px !custom' },
-              '& > table': { width: 'calc(100% + 24px) !custom' },
+              '& > table, & > [data-rows]': { marginInline: '-12' },
+              '& > [data-rows]': { marginBlock: '-6' },
+              '& > [data-rows]:first-child': { marginBlockStart: '-12' },
+              '& > [data-rows]:last-child': { marginBlockEnd: '-12' },
+              '& > table': { width: `calc(100% + ${vars.spacing['24']}) !custom` },
               '& > table > caption, & > table tr > :first-child': {
-                paddingInlineStart: '12px !custom',
+                paddingInlineStart: '12',
               },
-              '& > table tr > :last-child': { paddingInlineEnd: '12px !custom' },
-              '& > table:first-child:has(> thead)': { marginBlockStart: '-12px !custom' },
+              '& > table tr > :last-child': { paddingInlineEnd: '12' },
+              '& > table:first-child:has(> thead)': { marginBlockStart: '-12' },
               '& > table:first-child > thead > tr:first-child > th': {
-                paddingBlockStart: '12px !custom',
+                paddingBlockStart: '12',
               },
               '& > table:last-child:not(:has(> caption))': {
-                marginBlockEnd: '-12px !custom',
+                marginBlockEnd: '-12',
               },
               '& > table:last-child:not(:has(> caption)) > tbody > tr:last-child > td': {
-                paddingBlockEnd: '12px !custom',
+                paddingBlockEnd: '12',
               },
             },
           },

package/src/web/components/Switch.tsx

@@ -84,7 +84,7 @@ namespace styles {
       flexShrink: '0 !custom',
       height: '24px !custom',
       // The thumb stretches its width while pressed, which a transform would distort.
-      transitionDuration: '240ms',
+      transitionDuration: '240',
       transitionProperty: 'background-color, box-shadow, translate, width',
       transitionTimingFunction: 'overshoot',
       width: '24px !custom',
@@ -94,22 +94,18 @@ namespace styles {
           boxShadow: 'none !custom',
           translate: '22px 0 !custom',
         },
-        '[data-size="large"] > &': { height: '30px !custom', width: '30px !custom' },
-        '[data-size="large"] > &[data-checked]': { translate: '30px 0 !custom' },
-        '[data-size="large"]:active:not([data-disabled]) > &': { width: '36px !custom' },
-        '[data-size="large"]:active:not([data-disabled]) > &[data-checked]': {
-          translate: '24px 0 !custom',
-        },
+        '[data-size="large"] > &': { height: '30', width: '30' },
+        '[data-size="large"] > &[data-checked]': { translate: '30' },
+        '[data-size="large"]:active:not([data-disabled]) > &': { width: '36' },
+        '[data-size="large"]:active:not([data-disabled]) > &[data-checked]': { translate: '24' },
         '[data-size="medium"]:active:not([data-disabled]) > &': { width: '30px !custom' },
         '[data-size="medium"]:active:not([data-disabled]) > &[data-checked]': {
           translate: '16px 0 !custom',
         },
-        '[data-size="small"] > &': { height: '20px !custom', width: '20px !custom' },
-        '[data-size="small"] > &[data-checked]': { translate: '16px 0 !custom' },
-        '[data-size="small"]:active:not([data-disabled]) > &': { width: '24px !custom' },
-        '[data-size="small"]:active:not([data-disabled]) > &[data-checked]': {
-          translate: '12px 0 !custom',
-        },
+        '[data-size="small"] > &': { height: '20', width: '20' },
+        '[data-size="small"] > &[data-checked]': { translate: '16' },
+        '[data-size="small"]:active:not([data-disabled]) > &': { width: '24' },
+        '[data-size="small"]:active:not([data-disabled]) > &[data-checked]': { translate: '12' },
       },
       '@media (prefers-reduced-motion: reduce)': {
         transitionProperty: 'background-color, box-shadow',
@@ -129,24 +125,24 @@ namespace styles {
         display: 'inline-flex',
         flexShrink: '0 !custom',
         outlineColor: 'transparent !custom',
-        outlineOffset: '0px !custom',
+        outlineOffset: '0',
         outlineStyle: 'solid !custom',
-        outlineWidth: '2px !custom',
+        outlineWidth: '2',
         position: 'relative',
-        transitionDuration: '160ms',
+        transitionDuration: '160',
         transitionProperty: 'background-color, opacity, outline-color, outline-offset',
         transitionTimingFunction: 'snappy',
         selectors: {
-          '&::after': { content: '"" !custom', inset: '-8px !custom', position: 'absolute' },
-          '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2px !custom' },
+          '&::after': { content: '"" !custom', inset: '-8', position: 'absolute' },
+          '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2' },
           '&:hover:not([data-disabled]):not([data-checked])': { backgroundColor: 'grayAlpha.300' },
           '&[data-checked]': { backgroundColor: 'foreground' },
-          '&[data-checked]:hover:not([data-disabled])': { opacity: '0.86 !custom' },
-          '&[data-disabled]': { cursor: 'default', opacity: '0.4 !custom' },
+          '&[data-checked]:hover:not([data-disabled])': { opacity: 'hover' },
+          '&[data-disabled]': { cursor: 'default', opacity: 'disabled' },
           '&[data-invalid]': {
             outlineColor: 'red.800',
             outlineStyle: 'solid !custom',
-            outlineWidth: '1px !custom',
+            outlineWidth: '1',
           },
           '[data-variant="setting"] > &': {
             alignSelf: 'center !custom',
@@ -162,9 +158,11 @@ namespace styles {
       defaultVariants: { size: 'medium' },
       variants: {
         size: {
-          large: { height: '38px !custom', padding: '4px !custom', width: '68px !custom' },
+          large: { height: '38', padding: '4', width: '68' },
+          // The track, thumb, and checked translation of each size add up exactly, so a size uses
+          // tokens or px throughout. Medium stays in px, since its 3px padding has no spacing step.
           medium: { height: '30px !custom', padding: '3px !custom', width: '52px !custom' },
-          small: { height: '24px !custom', padding: '2px !custom', width: '40px !custom' },
+          small: { height: '24', padding: '2', width: '40' },
         },
       },
     },

package/src/web/components/Table.tsx

@@ -282,17 +282,17 @@ namespace styles {
             selectors: {
               '& tbody tr': {
                 outlineColor: 'transparent !custom',
-                outlineOffset: '0px !custom',
+                outlineOffset: '0',
                 outlineStyle: 'solid !custom',
-                outlineWidth: '2px !custom',
-                transitionDuration: '160ms',
+                outlineWidth: '2',
+                transitionDuration: '160',
                 transitionProperty: 'background-color, outline-color, outline-offset',
                 transitionTimingFunction: 'snappy',
               },
               '& tbody tr:hover': { backgroundColor: 'grayAlpha.100' },
               '& tbody tr:focus-visible': {
                 outlineColor: 'blue.700',
-                outlineOffset: '-2px !custom',
+                outlineOffset: '-2',
               },
               '& tbody tr:is([tabindex], [role="button"], [data-href]):hover': {
                 cursor: 'pointer',

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.900',
-            transitionDuration: '160ms !custom',
+            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)': {