@tempoxyz/ds 0.2.6 → 0.3.1

package/src/web/components/Surface.tsx

@@ -4,14 +4,18 @@ import type * as zyzz from 'zyzz'
 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
- * `section`, `button` or link. A `button`, `a[href]` or `role="button"` surface gains hover, press
- * and focus-visible styles and spans the full width.
+ * A card container that renders a `div` with a 1px border inside its edge by default. Pass
+ * `render` to swap the element, such as a `section`, `button` or link. A `button`, `a[href]` or
+ * `role="button"` surface gains hover, press and focus-visible styles and spans the full width.
  *
- * - `size` sets the corner radius and padding together.
+ * - `size` sets the corner radius and padding together, at the same value.
  * - 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 padding, so row fills reach the edges.
+ * - A direct child `table` bleeds 12px into the padding at the sides and the bottom, as rows pad
+ *   their cells, so its text stays on the content edge. The surface draws no border around it.
+ * - A direct child `plain` `ListGroup` bleeds into the padding, so a hover fill reaches the edges.
+ *   Each row is 44px, pads its sides by the surface's padding, and shares the height of the
+ *   tallest row.
  *
  * @example
  * <Surface>
@@ -54,11 +58,20 @@ export namespace Surface {
     export type Props = ComponentPropsWithRef<'p'> & zyzz.Props.Variants<typeof styles.description>
   }
 
-  /** A row above the content holding a `Surface.Title` and, at the end, any actions. */
+  /**
+   * A row above the content holding a `Surface.Title` and, at the end, any actions, with 20px of
+   * space below it.
+   */
   export function Header(props: Header.Props) {
     const { className, vars, ...attributes } = props
 
-    return <div {...attributes} {...styles.header({ className, style: props.style, vars })} />
+    return (
+      <div
+        {...attributes}
+        data-surface-header=""
+        {...styles.header({ className, style: props.style, vars })}
+      />
+    )
   }
 
   export namespace Header {
@@ -85,7 +98,10 @@ export namespace Surface {
       disabled?: boolean | undefined
     }
 
-  /** The card heading, rendered as an `h2`. A leading `svg` icon renders at 24px. */
+  /**
+   * The card heading, rendered as an `h2`. A leading `svg` icon renders at 24px. In a surface that
+   * holds a direct child `table`, the title renders at the size of a section heading.
+   */
   export function Title(props: Title.Props) {
     const { className, vars, ...attributes } = props
 
@@ -101,10 +117,10 @@ namespace styles {
   export const description = variants(
     {
       base: {
-        color: 'gray.900',
+        color: 'content.secondary',
         margin: '0',
         selectors: { '& + *': { marginBlockStart: '24' } },
-        typography: 'copy.15',
+        typography: 'body.b1',
       },
     },
     { id: 'tds/web/surface/description' },
@@ -117,23 +133,23 @@ namespace styles {
         columnGap: '16',
         display: 'flex',
         justifyContent: 'space-between',
-        marginBlockEnd: '16',
+        marginBlockEnd: '20',
         minWidth: '0',
         selectors: {
-          // 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: '-20',
+          // A trailing tertiary button bleeds by its inline padding, so its label aligns with the
+          // content edge, but never past the surface padding.
+          '& > [data-variant="tertiary"]:not([data-shape="icon"]):last-child': {
+            marginInlineEnd: '-24',
           },
-          '& > [data-variant="text"][data-size="small"]:not([data-shape="icon"]):last-child': {
-            marginInlineEnd: '-12',
+          '& > [data-variant="tertiary"][data-size="small"]:not([data-shape="icon"]):last-child': {
+            marginInlineEnd: '-16',
           },
-          '& > [data-variant="text"][data-size="large"]:not([data-shape="icon"]):last-child': {
-            marginInlineEnd: '-24',
+          '& > [data-variant="tertiary"][data-size="xsmall"]:not([data-shape="icon"]):last-child': {
+            marginInlineEnd: '-12',
           },
-          '[data-surface-size="medium"] > & > [data-variant="text"]:is([data-size="medium"], [data-size="large"]):not([data-shape="icon"]):last-child':
+          '[data-surface-size="medium"] > & > [data-variant="tertiary"]:is([data-size="medium"], [data-size="large"]):not([data-shape="icon"]):last-child':
             { marginInlineEnd: '-16' },
-          '[data-surface-size="small"] > & > [data-variant="text"]:is([data-size="medium"], [data-size="large"]):not([data-shape="icon"]):last-child':
+          '[data-surface-size="small"] > & > [data-variant="tertiary"]:is([data-size="small"], [data-size="medium"], [data-size="large"]):not([data-shape="icon"]):last-child':
             { marginInlineEnd: '-12' },
         },
       },
@@ -153,8 +169,8 @@ namespace styles {
             appearance: 'none !custom',
             backgroundColor: 'transparent !custom',
             border: 'none !custom',
-            borderRadius: '2',
-            color: 'foreground',
+            borderRadius: '3xs',
+            color: 'content.primary',
             cursor: 'pointer',
             font: 'inherit !custom',
             outlineColor: 'transparent !custom',
@@ -171,9 +187,9 @@ namespace styles {
             transitionTimingFunction: 'snappy',
           },
           '& > :is(a, button):hover': { textDecorationColor: 'currentColor !custom' },
-          '& > :is(a, button):focus-visible': { outlineColor: 'blue.700' },
+          '& > :is(a, button):focus-visible': { outlineColor: 'border.focus' },
         },
-        typography: 'label.16.strong',
+        typography: 'body.b1Strong',
       },
     },
     { id: 'tds/web/surface/links' },
@@ -182,9 +198,12 @@ namespace styles {
   export const surface = variants(
     {
       base: {
-        backgroundColor: 'background.surface',
+        backgroundColor: 'background.elevated',
+        borderColor: 'line.secondary',
+        borderStyle: 'solid',
+        borderWidth: 'regular',
         boxSizing: 'border-box',
-        color: 'foreground',
+        color: 'content.primary',
         display: 'block',
         outlineColor: 'transparent !custom',
         outlineOffset: '0',
@@ -194,40 +213,79 @@ namespace styles {
         transitionDuration: '160',
         transitionProperty: 'background-color, opacity, outline-color, outline-offset, scale',
         transitionTimingFunction: 'snappy',
-        typography: 'copy.14',
+        typography: 'body.b2',
         selectors: {
           '&:is(button, a[href], [role="button"])': {
-            border: 'none !custom',
             cursor: 'pointer',
             textDecoration: 'none !custom',
             width: '100% !custom',
           },
           '&:is(button, a[href], [role="button"]):hover:not(:disabled, [aria-disabled="true"])': {
-            backgroundColor: 'gray.100',
+            backgroundColor: 'container.regular',
           },
           '&:is(button, a[href], [role="button"]):active:not(:disabled, [aria-disabled="true"])': {
-            backgroundColor: 'gray.200',
+            backgroundColor: 'container.strong',
             scale: 'press',
           },
           '&:is(button, a[href], [role="button"]):focus-visible': {
-            outlineColor: 'blue.700',
+            outlineColor: 'border.focus',
             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.
-          '&:has(> [data-rows])': { overflow: 'hidden' },
-          '&:has(> table)': { overflow: 'clip !custom' },
+          // Row fills reach the edges of a small surface and would otherwise cross its corners. A
+          // table clips rather than hides its overflow, so a sticky header still sticks to the
+          // scrolling ancestor. The surface draws no border around the rows.
+          '&:has(> table)': { borderStyle: 'none', overflow: 'clip !custom' },
+          // Every row takes the height of the tallest, such as a row that holds a 48px field. The
+          // column can shrink below a row's content, so a long value truncates inside the surface.
+          '& > [data-list-group][data-variant="plain"]': {
+            display: 'grid',
+            gridAutoRows: '1fr !custom',
+            gridTemplateColumns: 'minmax(0, 1fr) !custom',
+          },
+          // Rows are 44px, with 4px above and below a 32px control. Their fills stay square, except
+          // at the surface's corners, where each size rounds them inside the border.
+          '& > [data-list-group][data-variant="plain"] > [data-divider]': {
+            borderRadius: 'none',
+            minHeight: '44',
+            paddingBlock: '4',
+          },
+          // A row of a title over a description, or of a meter, keeps its own block padding.
+          '& > [data-list-group][data-variant="plain"] > [data-divider]:has([data-info])': {
+            paddingBlock: '12',
+          },
+          '& > [data-list-group][data-variant="plain"] > [data-divider]:has([role="meter"])': {
+            paddingBlock: '10',
+          },
+          // The rows already reach the surface's edges, so their fills draw no bleed past them.
+          '& > [data-list-group][data-variant="plain"] > [data-divider]:is(:hover, :active)': {
+            boxShadow: 'none !custom',
+          },
+          // After a header, the list rises by the 14px above the text of a one-line row, so the
+          // text keeps the header's 20px gap. After other content, the list keeps its place, so its
+          // fills never cover that content.
+          '& > [data-surface-header] + [data-list-group][data-variant="plain"]:has(> [data-divider])':
+            {
+              marginBlockStart: 'calc((1rem - 2.75rem) / 2) !custom',
+            },
+          // A table bleeds by the 12px that its rows pad their edge cells, so the rows sit 12px
+          // inside the padding and their text on the content edge.
+          '& > table': {
+            marginInline: '-12',
+            width: `calc(100% + ${vars.spacing['24']}) !custom`,
+          },
           // A table at the top or bottom edge insets its text by the padding alone, as at the sides.
           // The header row bleeds to the top edge, so a sticky header keeps the padding above its
-          // text. The caption drops its outer padding. Without a caption, the last row bleeds to the
-          // bottom edge and keeps the half gap above its text from its 32, 40 or 56px height with
-          // 20px type.
+          // text. The caption drops its outer padding. Without a caption, the last row bleeds 12px
+          // into the bottom padding and keeps the half gap above its text from its 32, 40 or 56px
+          // height with 20px type.
           '& > table:last-child > caption': { paddingBlockEnd: '0px !custom' },
+          '& > table:last-child:not(:has(> caption))': { marginBlockEnd: '-12' },
           '& > table:last-child:not(:has(> caption)) > tbody > tr:last-child > td': {
             height: 'auto !custom',
+            paddingBlockEnd: '12',
           },
           '& > table[data-size="large"]:last-child:not(:has(> caption)) > tbody > tr:last-child > td':
-            { paddingBlockStart: '18' },
+            { paddingBlockStart: '20' },
           '& > table[data-size="medium"]:last-child:not(:has(> caption)) > tbody > tr:last-child > td':
             { paddingBlockStart: '10' },
           '& > table[data-size="small"]:last-child:not(:has(> caption)) > tbody > tr:last-child > td':
@@ -248,84 +306,99 @@ namespace styles {
       },
       defaultVariants: { size: 'large' },
       variants: {
-        // 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 at the top or bottom edge take the full block padding,
-        // since each row brings its own, and take half beside other content.
+        // Each size pads by its own radius, and they scale together. A direct child table with a
+        // header bleeds into the top padding, and its header cells take back exactly the padding.
+        // A direct child list bleeds into the padding at the sides, and above and below it at the
+        // surface's edges once it holds a row, so an empty list keeps the padding. Its rows take
+        // back the padding at the sides.
         size: {
           large: {
-            borderRadius: '16',
+            borderRadius: 'md',
             padding: '24',
             selectors: {
-              '& > 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: '24',
-              },
-              '& > table tr > :last-child': { paddingInlineEnd: '24' },
               '& > table:first-child:has(> thead)': { marginBlockStart: '-24' },
-              '& > table:first-child > thead > tr:first-child > th': {
-                paddingBlockStart: '24',
+              '& > [data-list-group][data-variant="plain"]': { marginInline: '-24' },
+              '& > [data-list-group][data-variant="plain"]:first-child:has(> [data-divider])': {
+                marginBlockStart: '-24',
               },
-              '& > table:last-child:not(:has(> caption))': {
+              '& > [data-list-group][data-variant="plain"]:last-child:has(> [data-divider])': {
                 marginBlockEnd: '-24',
               },
-              '& > table:last-child:not(:has(> caption)) > tbody > tr:last-child > td': {
-                paddingBlockEnd: '24',
+              '& > [data-list-group][data-variant="plain"]:first-child > [data-divider]:first-child':
+                {
+                  borderStartEndRadius: `calc(${vars.radius.md} - 1px) !custom`,
+                  borderStartStartRadius: `calc(${vars.radius.md} - 1px) !custom`,
+                },
+              '& > [data-list-group][data-variant="plain"]:last-child > [data-divider]:last-child':
+                {
+                  borderEndEndRadius: `calc(${vars.radius.md} - 1px) !custom`,
+                  borderEndStartRadius: `calc(${vars.radius.md} - 1px) !custom`,
+                },
+              '& > [data-list-group][data-variant="plain"] > [data-divider]': {
+                paddingInline: '24',
+              },
+              '& > table:first-child > thead > tr:first-child > th': {
+                paddingBlockStart: '24',
               },
             },
           },
           medium: {
-            borderRadius: '12',
+            borderRadius: 'sm',
             padding: '16',
             selectors: {
-              '& > 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: '16',
-              },
-              '& > table tr > :last-child': { paddingInlineEnd: '16' },
               '& > table:first-child:has(> thead)': { marginBlockStart: '-16' },
-              '& > table:first-child > thead > tr:first-child > th': {
-                paddingBlockStart: '16',
+              '& > [data-list-group][data-variant="plain"]': { marginInline: '-16' },
+              '& > [data-list-group][data-variant="plain"]:first-child:has(> [data-divider])': {
+                marginBlockStart: '-16',
               },
-              '& > table:last-child:not(:has(> caption))': {
+              '& > [data-list-group][data-variant="plain"]:last-child:has(> [data-divider])': {
                 marginBlockEnd: '-16',
               },
-              '& > table:last-child:not(:has(> caption)) > tbody > tr:last-child > td': {
-                paddingBlockEnd: '16',
+              '& > [data-list-group][data-variant="plain"]:first-child > [data-divider]:first-child':
+                {
+                  borderStartEndRadius: `calc(${vars.radius.sm} - 1px) !custom`,
+                  borderStartStartRadius: `calc(${vars.radius.sm} - 1px) !custom`,
+                },
+              '& > [data-list-group][data-variant="plain"]:last-child > [data-divider]:last-child':
+                {
+                  borderEndEndRadius: `calc(${vars.radius.sm} - 1px) !custom`,
+                  borderEndStartRadius: `calc(${vars.radius.sm} - 1px) !custom`,
+                },
+              '& > [data-list-group][data-variant="plain"] > [data-divider]': {
+                paddingInline: '16',
+              },
+              '& > table:first-child > thead > tr:first-child > th': {
+                paddingBlockStart: '16',
               },
             },
           },
           small: {
-            borderRadius: '8',
+            borderRadius: 'xs',
             padding: '12',
             selectors: {
-              '& > 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: '12',
-              },
-              '& > table tr > :last-child': { paddingInlineEnd: '12' },
               '& > table:first-child:has(> thead)': { marginBlockStart: '-12' },
-              '& > table:first-child > thead > tr:first-child > th': {
-                paddingBlockStart: '12',
+              '& > [data-list-group][data-variant="plain"]': { marginInline: '-12' },
+              '& > [data-list-group][data-variant="plain"]:first-child:has(> [data-divider])': {
+                marginBlockStart: '-12',
               },
-              '& > table:last-child:not(:has(> caption))': {
+              '& > [data-list-group][data-variant="plain"]:last-child:has(> [data-divider])': {
                 marginBlockEnd: '-12',
               },
-              '& > table:last-child:not(:has(> caption)) > tbody > tr:last-child > td': {
-                paddingBlockEnd: '12',
+              '& > [data-list-group][data-variant="plain"]:first-child > [data-divider]:first-child':
+                {
+                  borderStartEndRadius: `calc(${vars.radius.xs} - 1px) !custom`,
+                  borderStartStartRadius: `calc(${vars.radius.xs} - 1px) !custom`,
+                },
+              '& > [data-list-group][data-variant="plain"]:last-child > [data-divider]:last-child':
+                {
+                  borderEndEndRadius: `calc(${vars.radius.xs} - 1px) !custom`,
+                  borderEndStartRadius: `calc(${vars.radius.xs} - 1px) !custom`,
+                },
+              '& > [data-list-group][data-variant="plain"] > [data-divider]': {
+                paddingInline: '12',
+              },
+              '& > table:first-child > thead > tr:first-child > th': {
+                paddingBlockStart: '12',
               },
             },
           },
@@ -339,13 +412,19 @@ namespace styles {
     {
       base: {
         alignItems: 'center',
-        color: 'foreground',
+        color: 'content.primary',
         columnGap: '12',
         display: 'flex',
         margin: '0',
         minWidth: '0',
-        selectors: { '& > svg': { flexShrink: '0 !custom', fontSize: '24' } },
-        typography: 'heading.20',
+        selectors: {
+          '& > svg': { flexShrink: '0 !custom', fontSize: '24' },
+          // A card that holds a table titles it as a section of the page.
+          '[data-surface-size]:has(> table) > &, [data-surface-size]:has(> table) > * > &': {
+            typography: 'heading.h3',
+          },
+        },
+        typography: 'body.b2Strong',
       },
     },
     { id: 'tds/web/surface/title' },

package/src/web/components/Switch.tsx

@@ -2,24 +2,25 @@ import * as BaseUi from '@base-ui/react/switch'
 import { type ComponentPropsWithRef, useContext } from 'react'
 import type * as zyzz from 'zyzz'
 import { style, variants } from '../zyzz.config.js'
-import * as FieldVariant from './internal/FieldVariant.js'
+import * as RowDisabled from './internal/RowDisabled.js'
 import * as RowsSize from './internal/RowsSize.js'
 
 /**
  * A pill toggle for a setting that applies immediately. Base UI renders a `span` with the `switch`
  * role beside a hidden checkbox input that submits with `name`. Click, Space and Enter toggle it.
- * Inside a `setting` field it defaults to `small` and sits beside the label. Inside `Rows` it
- * defaults to `small` in `small` and `medium` rows and to `medium` in `large` rows.
+ * Inside `ListGroup`, it defaults to `small`.
  *
  * - Use it when the change takes effect at once. Use `Checkbox` for choices submitted later.
  * - Name the setting in the label, not its state. Use `Field.Label` or `aria-label`.
  * - Thumb position shows the state alongside color, so keep custom styles from hiding it.
  *
  * @example
- * <Field.Root variant="setting">
- *   <Field.Label>Notifications</Field.Label>
+ * <Field.Root>
+ *   <Field.Item>
+ *     <Switch />
+ *     <Field.Label>Notifications</Field.Label>
+ *   </Field.Item>
  *   <Field.Description>Email me when a payment settles.</Field.Description>
- *   <Switch />
  * </Field.Root>
  *
  * @see {@link https://base-ui.com/react/components/switch | Base UI Switch}
@@ -30,20 +31,19 @@ import * as RowsSize from './internal/RowsSize.js'
  */
 export function Switch(props: Switch.Props) {
   const { className, size, vars, ...attributes } = props
-  const inherited = useContext(FieldVariant.Context)
   const row = useContext(RowsSize.Context)
+  const rowDisabled = useContext(RowDisabled.Context)
 
   return (
     <BaseUi.Switch.Root
       {...attributes}
+      disabled={attributes.disabled || rowDisabled}
       {...styles.track({
         className,
         size: (() => {
           if (size !== undefined) return size
-          if (inherited === 'setting') return 'small'
-          if (row === undefined) return undefined
-          // Keep the track near two thirds of the row height.
-          return row === 'large' ? 'medium' : 'small'
+          if (row) return 'small'
+          return undefined
         })(),
         style: props.style,
         vars,
@@ -78,9 +78,10 @@ export namespace Switch {
 namespace styles {
   export const thumb = style(
     {
-      backgroundColor: 'white',
+      backgroundColor: 'neutral.000',
       borderRadius: 'full',
-      boxShadow: 'raised',
+      boxShadow: 'small',
+      cornerShape: 'round',
       flexShrink: '0 !custom',
       height: '24px !custom',
       // The thumb stretches its width while pressed, which a transform would distort.
@@ -90,14 +91,14 @@ namespace styles {
       width: '24px !custom',
       selectors: {
         '&[data-checked]': {
-          backgroundColor: 'background.surface',
+          backgroundColor: 'background.elevated',
           boxShadow: 'none !custom',
           translate: '22px 0 !custom',
         },
-        '[data-size="large"] > &': { height: '30', width: '30' },
-        '[data-size="large"] > &[data-checked]': { translate: '30' },
+        '[data-size="large"] > &': { height: '32', width: '32' },
+        '[data-size="large"] > &[data-checked]': { translate: '32' },
         '[data-size="large"]:active:not([data-disabled]) > &': { width: '36' },
-        '[data-size="large"]:active:not([data-disabled]) > &[data-checked]': { translate: '24' },
+        '[data-size="large"]:active:not([data-disabled]) > &[data-checked]': { translate: '28' },
         '[data-size="medium"]:active:not([data-disabled]) > &': { width: '30px !custom' },
         '[data-size="medium"]:active:not([data-disabled]) > &[data-checked]': {
           translate: '16px 0 !custom',
@@ -118,9 +119,10 @@ namespace styles {
     {
       base: {
         alignItems: 'center',
-        backgroundColor: 'grayAlpha.200',
+        backgroundColor: 'container.strong',
         borderRadius: 'full',
         boxSizing: 'border-box',
+        cornerShape: 'round',
         cursor: 'pointer',
         display: 'inline-flex',
         flexShrink: '0 !custom',
@@ -134,22 +136,16 @@ namespace styles {
         transitionTimingFunction: 'snappy',
         selectors: {
           '&::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' },
+          '&:focus-visible': { outlineColor: 'border.focus', outlineOffset: '2' },
+          '&:hover:not([data-disabled]):not([data-checked])': { backgroundColor: 'line.primary' },
+          '&[data-checked]': { backgroundColor: 'content.primary' },
           '&[data-checked]:hover:not([data-disabled])': { opacity: 'hover' },
           '&[data-disabled]': { cursor: 'default', opacity: 'disabled' },
           '&[data-invalid]': {
-            outlineColor: 'red.800',
+            outlineColor: 'border.negative',
             outlineStyle: 'solid !custom',
             outlineWidth: '1',
           },
-          '[data-variant="setting"] > &': {
-            alignSelf: 'center !custom',
-            gridColumn: '2 !custom',
-            gridRow: '1 / span 2 !custom',
-            justifySelf: 'end !custom',
-          },
         },
         '@media (prefers-reduced-motion: reduce)': {
           transitionProperty: 'background-color, opacity, outline-color',
@@ -158,7 +154,7 @@ namespace styles {
       defaultVariants: { size: 'medium' },
       variants: {
         size: {
-          large: { height: '38', padding: '4', width: '68' },
+          large: { height: '40', padding: '4', width: '72' },
           // 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' },