refactor(opal): finish the padding migration and close the scales (#13919)

Author: raunakab

web/lib/opal/src/components/buttons/line-item-button/README.md

@@ -9,7 +9,7 @@ A composite component that wraps `Interactive.Stateful > Interactive.Container >
 ```
 Interactive.Stateful         <- selectVariant, state, interaction, onClick, href, ref
   └─ Interactive.Container   <- width, rounding
-       └─ ContentAction      <- withInteractive, padding="lg"
+       └─ ContentAction      <- withInteractive, padding={2}
             ├─ Content       <- icon, title, description, sizePreset, variant, ...
             └─ rightChildren
 ```
@@ -18,7 +18,7 @@ The row renders as a focusable `<div role="button">` (with Enter/Space activatio
 native `<button>`, so interactive `rightChildren` such as action buttons don't produce invalid
 button-in-button nesting. With `href` it renders an anchor instead.
 
-`padding` is hardcoded to `"lg"` and `withInteractive` is always `true`. These are not exposed as props.
+`padding` is hardcoded to `2` and `withInteractive` is always `true`. These are not exposed as props.
 
 ## Props
 

web/lib/opal/src/components/buttons/line-item-button/components.tsx

@@ -132,7 +132,7 @@ function LineItemButton({
           <ContentAction
             color="interactive"
             {...(contentActionProps as ContentActionProps)}
-            padding="fit"
+            padding={0}
           />
         </div>
       </Interactive.Container>

web/lib/opal/src/components/buttons/sidebar-tab/components.tsx

@@ -212,7 +212,7 @@ function SidebarTab({
               variant="body"
               color="interactive"
               width="full"
-              padding="fit"
+              padding={0}
               rightChildren={truncationSpacer}
               titleMaxLines={1}
             />

web/lib/opal/src/components/cards/empty-message-card/README.md

@@ -13,7 +13,7 @@ A pre-configured Card for empty states. Renders a transparent card with a dashed
 | `sizePreset` | `"secondary" \| "main-ui"`   | `"secondary"` | Controls layout and text sizing    |
 | `icon`       | `IconFunctionComponent`       | `SvgEmpty`    | Icon displayed alongside the title |
 | `title`      | `string \| RichStr`           | —             | Primary message text (required)    |
-| `padding`    | `Spacing`             | `4`           | Padding, as a spacing step (`N / 4` rem) |
+| `padding`    | `0 \| 0.5 \| 1 \| 2 \| 4 \| 6` | `4` | Padding, as a spacing step (`N / 4` rem). Closed set. |
 | `ref`        | `React.Ref<HTMLDivElement>`   | —             | Ref forwarded to the root div      |
 
 ### `sizePreset="main-ui"` only

web/lib/opal/src/components/cards/empty-message-card/components.tsx

@@ -1,7 +1,7 @@
 import { Card } from "@opal/components/cards/card/components";
 import { Content } from "@opal/layouts";
 import { SvgEmpty } from "@opal/icons";
-import type { IconFunctionComponent, Spacing, RichStr } from "@opal/types";
+import type { IconFunctionComponent, RichStr } from "@opal/types";
 
 // ---------------------------------------------------------------------------
 // Types
@@ -14,8 +14,16 @@ type EmptyMessageCardBaseProps = {
   /** Primary message text. */
   title: string | RichStr;
 
-  /** Padding preset for the card. @default "md" */
-  padding?: Spacing;
+  /**
+   * Padding around the card, as a spacing step (`N / 4` rem).
+   *
+   * A closed set: an empty state is a fixed presentation, not a surface callers
+   * lay out themselves, so it offers the densities the named scale did and no
+   * more. `Card` stays open — it is the general-purpose container.
+   *
+   * @default 4
+   */
+  padding?: 0 | 0.5 | 1 | 2 | 4 | 6;
 
   /** Ref forwarded to the root Card div. */
   ref?: React.Ref<HTMLDivElement>;

web/lib/opal/src/components/cards/message-card/components.tsx

@@ -175,7 +175,7 @@ function MessageCard({
           titleMaxLines={titleMaxLines}
           sizePreset="main-ui"
           variant="section"
-          padding="md"
+          padding={1}
           rightChildren={right}
         />
       </div>

web/lib/opal/src/components/divider/README.md

@@ -15,8 +15,8 @@ A plain line with no title or description.
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | Direction of the line |
-| `paddingParallel` | `Spacing` | `2` | Padding along the line direction (0.5rem) |
-| `paddingPerpendicular` | `Spacing` | `1` | Padding perpendicular to the line (0.25rem) |
+| `paddingParallel` | `0 \| 0.5 \| 1 \| 2 \| 4 \| 6` | `2` | Inset along the line direction, as a spacing step (`N / 4` rem) |
+| `paddingPerpendicular` | `0 \| 0.5 \| 1 \| 2 \| 4 \| 6` | `1` | Inset perpendicular to the line, as a spacing step (`N / 4` rem) |
 
 ### Titled divider
 

web/lib/opal/src/components/divider/components.tsx

@@ -2,7 +2,7 @@
 
 import "@opal/components/divider/styles.css";
 import { useState, useCallback } from "react";
-import type { OrientationVariants, Spacing, RichStr } from "@opal/types";
+import type { OrientationVariants, RichStr } from "@opal/types";
 import { Button, Text } from "@opal/components";
 import { SvgChevronRight } from "@opal/icons";
 import { Interactive } from "@opal/core";
@@ -27,6 +27,15 @@ interface DividerSharedProps {
   children?: never;
 }
 
+/**
+ * The insets a divider offers, as spacing steps (`N / 4` rem).
+ *
+ * A closed set rather than an open number: a divider's inset is a shared rhythm
+ * across the surfaces it separates, so an arbitrary step would only ever put one
+ * divider out of step with the rest.
+ */
+type DividerSpacing = 0 | 0.5 | 1 | 2 | 4 | 6;
+
 /** Plain line — no title, no description. */
 type DividerBareProps = Omit<
   DividerSharedProps,
@@ -35,9 +44,9 @@ type DividerBareProps = Omit<
   /** Orientation of the line. Default: `"horizontal"`. */
   orientation?: OrientationVariants;
   /** Padding along the line direction, as a spacing step. Default: `2` (0.5rem). */
-  paddingParallel?: Spacing;
+  paddingParallel?: DividerSpacing;
   /** Padding perpendicular to the line, as a spacing step. Default: `1` (0.25rem). */
-  paddingPerpendicular?: Spacing;
+  paddingPerpendicular?: DividerSpacing;
 };
 
 /** Line with a title to the left. */
@@ -192,4 +201,4 @@ function FoldableDivider({
   );
 }
 
-export { Divider, type DividerProps };
+export { Divider, type DividerProps, type DividerSpacing };

web/lib/opal/src/components/index.ts

@@ -79,6 +79,7 @@ export {
 export {
   Divider,
   type DividerProps,
+  type DividerSpacing,
 } from "@opal/components/divider/components";
 
 /* IconContainer */

web/lib/opal/src/components/inputs/input-select/components.tsx

@@ -8,11 +8,16 @@ import { cn } from "@opal/utils";
 import type {
   IconFunctionComponent,
   InputVariants,
-  Spacing,
   RichStr,
   WithoutStyles,
 } from "@opal/types";
-import { Divider, InputTypeIn, Text, Tooltip } from "@opal/components";
+import {
+  Divider,
+  type DividerSpacing,
+  InputTypeIn,
+  Text,
+  Tooltip,
+} from "@opal/components";
 import { toPlainString } from "@opal/components/text/InlineMarkdown";
 import { ContentAction } from "@opal/layouts";
 import { SvgChevronDownSmall } from "@opal/icons";
@@ -398,7 +403,7 @@ function InputSelectItem({
           titleMaxLines={1}
           description={description}
           descriptionMaxLines={wrapDescription ? undefined : 1}
-          padding="fit"
+          padding={0}
           width="full"
         />
       </div>
@@ -434,8 +439,8 @@ function InputSelectLabel({
 }
 
 interface InputSelectSeparatorProps {
-  paddingParallel?: Spacing;
-  paddingPerpendicular?: Spacing;
+  paddingParallel?: DividerSpacing;
+  paddingPerpendicular?: DividerSpacing;
 }
 
 function InputSelectSeparator({