AUI: Updated reference density recipes (#240)

Author: bheston

change/@adaptive-web-adaptive-ui-aabdffcb-a2ed-4bb7-ba52-70af55c22ca4.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Updated reference density recipes",
+  "packageName": "@adaptive-web/adaptive-ui",
+  "email": "47367562+bheston@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@adaptive-web-adaptive-ui-designer-core-76d11cb4-b37e-4d5f-b011-b87b8ba68965.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Updated reference density recipes",
+  "packageName": "@adaptive-web/adaptive-ui-designer-core",
+  "email": "47367562+bheston@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/adaptive-ui-designer-core/src/registry/recipes.ts

@@ -28,8 +28,10 @@ import {
     criticalStrokeStrong,
     criticalStrokeSubtle,
     densityControl,
+    densityControlList,
     densityItemContainer,
     densityLayer,
+    densityText,
     elevationCardRest,
     elevationDialog,
     elevationFlyout,
@@ -168,10 +170,18 @@ const designTokens: DesignTokenStore = [
     layerFillFocusDelta,
     wcagContrastLevel,
     densityAdjustmentUnits,
+    densityText.horizontalPaddingUnits,
+    densityText.horizontalGapUnits,
+    densityText.verticalPaddingUnits,
+    densityText.verticalGapUnits,
     densityControl.horizontalPaddingUnits,
     densityControl.horizontalGapUnits,
     densityControl.verticalPaddingUnits,
     densityControl.verticalGapUnits,
+    densityControlList.horizontalPaddingUnits,
+    densityControlList.horizontalGapUnits,
+    densityControlList.verticalPaddingUnits,
+    densityControlList.verticalGapUnits,
     densityItemContainer.horizontalPaddingUnits,
     densityItemContainer.horizontalGapUnits,
     densityItemContainer.verticalPaddingUnits,
@@ -295,10 +305,18 @@ const strokeWidthTokens: DesignTokenStore = [
 ];
 
 const densityTokens: DesignTokenStore = [
+    densityText.horizontalPadding,
+    densityText.horizontalGap,
+    densityText.verticalPadding,
+    densityText.verticalGap,
     densityControl.horizontalPadding,
     densityControl.verticalPadding,
     densityControl.horizontalGap,
     densityControl.verticalGap,
+    densityControlList.horizontalPadding,
+    densityControlList.horizontalGap,
+    densityControlList.verticalPadding,
+    densityControlList.verticalGap,
     densityItemContainer.horizontalPadding,
     densityItemContainer.verticalPadding,
     densityItemContainer.horizontalGap,

packages/adaptive-ui/src/reference/density.ts

@@ -1,6 +1,11 @@
 import { DensityPaddingAndGapTokenGroup } from "../core/density/index.js";
 import { designUnit, strokeThickness } from "./appearance.js";
 
+/**
+ * @public
+ */
+export const densityText = new DensityPaddingAndGapTokenGroup("density.text", 0, 1, 0, 1, designUnit, "0px");
+
 /**
  * @public
  */
@@ -9,9 +14,15 @@ export const densityControl = new DensityPaddingAndGapTokenGroup("density.contro
 /**
  * @public
  */
+export const densityControlList = new DensityPaddingAndGapTokenGroup("density.controlList", 1, 0, 1, 0, designUnit, strokeThickness);
+
+/**
+ * @public
+ * @deprecated Use densityControlList
+ */
 export const densityItemContainer = new DensityPaddingAndGapTokenGroup("density.itemContainer", 1, 0, 1, 0, designUnit, strokeThickness);
 
 /**
  * @public
  */
-export const densityLayer = new DensityPaddingAndGapTokenGroup("density.layer", 4, 4, 4, 4, designUnit, strokeThickness);
+export const densityLayer = new DensityPaddingAndGapTokenGroup("density.layer", 4, 4, 4, 4, designUnit, "0px");

packages/adaptive-ui/src/reference/modules.ts

@@ -79,7 +79,7 @@ import {
     warningStrokeReadableRecipe,
     warningStrokeSafety,
 } from "./color.js";
-import { densityControl, densityItemContainer, densityLayer } from "./density.js";
+import { densityControl, densityControlList, densityItemContainer, densityLayer, densityText } from "./density.js";
 import { elevationCardInteractive, elevationCardRest, elevationDialog, elevationFlyout, elevationTooltip } from "./elevation.js";
 import { layerFillFixedPlus1 } from "./layer.js";
 import {
@@ -159,6 +159,22 @@ export const roundShapeStyles: Styles = Styles.fromProperties(
     "shape.round",
 );
 
+/**
+ * Style module for the density and spacing of plain text.
+ *
+ * By default, sets the padding and gap, useful for label and value pairs or stacked lines of text.
+ *
+ * @public
+ */
+export const textDensityStyles: Styles = Styles.fromProperties(
+    {
+        paddingHorizontal: densityText.horizontalPadding,
+        paddingVertical: densityText.verticalPadding,
+        gap: densityText.horizontalGap,
+    },
+    "density.text",
+);
+
 /**
  * Style module for the density and spacing of a control.
  *
@@ -233,14 +249,29 @@ export const autofillInnerDensityStyles: Styles = Styles.fromProperties(
     "density.autofill-inner",
 );
 
+/**
+ * Style module for the density and spacing of a list of controls.
+ *
+ * By default, sets the padding and gap, useful for menus, lists of buttons, etc.
+ *
+ * @public
+ */
+export const controlListDensityStyles: Styles = Styles.fromProperties(
+    {
+        paddingHorizontal: densityControlList.horizontalPadding,
+        paddingVertical: densityControlList.verticalPadding,
+        gap: densityControlList.horizontalGap,
+    },
+    "density.control-list",
+);
+
 /**
  * Style module for the density and spacing of an item container.
  *
  * By default, sets the padding and gap, useful for buttons, list items, etc.
  *
- * See {@link controlDensityStyles} or {@link autofillOuterDensityStyles}.
- *
  * @public
+ * @deprecated Use controlListDensityStyles
  */
 export const itemContainerDensityStyles: Styles = Styles.fromProperties(
     {