feat(commons): remove need for commons package

Author: castastrophe

.changeset/pre.json

@@ -32,7 +32,6 @@
     "@spectrum-css/colorslider": "8.0.1",
     "@spectrum-css/colorwheel": "6.0.1",
     "@spectrum-css/combobox": "4.0.1",
-    "@spectrum-css/commons": "11.0.0",
     "@spectrum-css/contextualhelp": "5.0.1",
     "@spectrum-css/datepicker": "4.0.1",
     "@spectrum-css/dial": "5.0.1",

.storybook/foundations/corner-rounding/action-button-corner-rounding.stories.js

@@ -96,3 +96,6 @@ const ActionButtonTable = (args, context) => {
 
 export const ActionButtonExamples = ActionButtonTable.bind({});
 ActionButtonExamples.args = {};
+ActionButtonExamples.parameters = {
+	chromatic: { disableSnapshot: true },
+};

.storybook/foundations/corner-rounding/checkbox-corner-rounding.stories.js

@@ -86,3 +86,6 @@ const CheckboxTable = (args, context) => {
 
 export const CheckboxExamples = CheckboxTable.bind({});
 CheckboxExamples.args = {};
+CheckboxExamples.parameters = {
+	chromatic: { disableSnapshot: true },
+};

.storybook/foundations/corner-rounding/corner-rounding.stories.js

@@ -86,3 +86,6 @@ const CornerRadiusGroup = (args = {}, context = {}) => html`
 
 export const CornerRounding = CornerRadiusGroup.bind({});
 CornerRounding.args = {};
+CornerRounding.parameters = {
+	chromatic: { disableSnapshot: true },
+};

.storybook/foundations/down-state/button-down-state.stories.js

@@ -25,3 +25,6 @@ ButtonDownState.args = {
 		"--spectrum-downstate-height": "32px"
 	}
 };
+ButtonDownState.parameters = {
+	chromatic: { disableSnapshot: true },
+};

.storybook/foundations/down-state/checkbox-down-state.stories.js

@@ -20,3 +20,6 @@ export const CheckboxDownState = Template.bind({});
 CheckboxDownState.args = {
 	label: "Checkbox",
 };
+CheckboxDownState.parameters = {
+	chromatic: { disableSnapshot: true },
+};

.storybook/foundations/drop-shadow/drop-shadow.stories.js

@@ -57,33 +57,51 @@ DropShadowEmphasizedDefault.args = {
 	variant: "emphasized-default",
 	isDropShadow: true,
 };
+DropShadowEmphasizedDefault.parameters = {
+	chromatic: { disableSnapshot: true },
+};
 
 export const DropShadowEmphasizedHover = DropShadowVariant.bind({});
 DropShadowEmphasizedHover.args = {
 	variant: "emphasized-hover",
 	isDropShadow: true,
 };
+DropShadowEmphasizedHover.parameters = {
+	chromatic: { disableSnapshot: true },
+};
 
 export const DropShadowElevated = DropShadowVariant.bind({});
 DropShadowElevated.args = {
 	variant: "elevated",
 	isDropShadow: true,
 };
+DropShadowElevated.parameters = {
+	chromatic: { disableSnapshot: true },
+};
 
 export const BoxShadowEmphasizedDefault = DropShadowVariant.bind({});
 BoxShadowEmphasizedDefault.args = {
 	variant: "emphasized-default",
 	isDropShadow: false,
 };
+BoxShadowEmphasizedDefault.parameters = {
+	chromatic: { disableSnapshot: true },
+};
 
 export const BoxShadowEmphasizedHover = DropShadowVariant.bind({});
 BoxShadowEmphasizedHover.args = {
 	variant: "emphasized-hover",
 	isDropShadow: false,
 };
+BoxShadowEmphasizedHover.parameters = {
+	chromatic: { disableSnapshot: true },
+};
 
 export const BoxShadowElevated = DropShadowVariant.bind({});
 BoxShadowElevated.args = {
 	variant: "elevated",
 	isDropShadow: false,
 };
+BoxShadowElevated.parameters = {
+	chromatic: { disableSnapshot: true },
+};

components/accordion/index.css

@@ -11,50 +11,10 @@
  * governing permissions and limitations under the License.
  */
 
-.spectrum-ActionBar {
-	/* Layout */
-	--spectrum-actionbar-height: var(--spectrum-action-bar-height);
-	--spectrum-actionbar-minimum-width: var(--spectrum-action-bar-minimum-width);
-	--spectrum-actionbar-corner-radius: var(--spectrum-corner-radius-medium-size-extra-large);
-	--spectrum-actionbar-spacing-label-to-action-group: var(--spectrum-action-bar-label-to-action-group-area);
-	--spectrum-actionbar-spacing-padding-inline: var(--spectrum-action-bar-edge-to-content-area);
-	--spectrum-actionbar-spacing-top-area: var(--spectrum-action-bar-top-to-content-area);
-	--spectrum-actionbar-spacing-bottom-area: var(--spectrum-action-bar-bottom-to-content-area);
-	--spectrum-actionbar-close-button-to-counter: var(--spectrum-action-bar-close-button-to-counter);
-	/* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- defines the field label mod  */
-	--spectrum-actionbar-item-counter-line-height: var(--spectrum-line-height-100);
-	--spectrum-actionbar-item-counter-color: var(--spectrum-neutral-content-color-default);
-
-	/* colors - applied to popover */
-	--spectrum-actionbar-popover-background-color: var(--spectrum-background-elevated-color);
-	--spectrum-actionbar-popover-border-color: var(--spectrum-action-bar-border-color);
-
-	/* spacing of action bar bottom and horizontal outer edge */
-	--spectrum-actionbar-spacing-outer-edge: var(--spectrum-spacing-300);
-
-	/* drop shadow */
-	--spectrum-actionbar-shadow-horizontal: var(--spectrum-drop-shadow-elevated-x);
-	--spectrum-actionbar-shadow-vertical: var(--spectrum-drop-shadow-elevated-y);
-	--spectrum-actionbar-shadow-blur: var(--spectrum-drop-shadow-elevated-blur);
-	--spectrum-actionbar-shadow-color: var(--spectrum-drop-shadow-elevated-color);
-
-	&.spectrum-ActionBar--emphasized {
-		--spectrum-actionbar-item-counter-color: var(--spectrum-gray-25);
-		--spectrum-actionbar-popover-background-color: var(--spectrum-neutral-content-color-default);
-	}
-
-	/* cjk language support for item counter */
-	&:lang(ja),
-	&:lang(zh),
-	&:lang(ko) {
-		--spectrum-actionbar-item-counter-line-height-cjk: var(--spectrum-cjk-line-height-100);
-	}
-}
-
 /* ActionBar is outer wrapper with nested popover component within */
 .spectrum-ActionBar {
 	/* creates horizontal spacing to edge */
-	padding: 0 var(--spectrum-actionbar-spacing-outer-edge);
+	padding: 0 var(--spectrum-spacing-300);
 	inset-block-end: 0;
 	z-index: 1;
 
@@ -68,30 +28,30 @@
 	block-size: 0;
 	opacity: 0;
 
-	&.is-open {
+	&:where(.is-open) {
 		/* add ActionBar bottom margin to height for correct spacing even when sticky */
-		block-size: calc(var(--spectrum-actionbar-spacing-outer-edge) + var(--spectrum-actionbar-height));
+		block-size: calc(var(--spectrum-spacing-300) + var(--spectrum-action-bar-height));
 		opacity: 1;
 	}
 
 	.spectrum-ActionBar-popover {
 		/* popover is ActionBar height */
-		block-size: var(--spectrum-actionbar-height);
-		min-inline-size: var(--spectrum-actionbar-minimum-width);
+		block-size: var(--spectrum-action-bar-height);
+		min-inline-size: var(--spectrum-action-bar-minimum-width);
 		box-sizing: border-box;
 		inline-size: 100%;
 		margin: auto;
-		padding-inline: var(--spectrum-actionbar-spacing-padding-inline);
-		padding-block: var(--spectrum-actionbar-spacing-top-area) var(--spectrum-actionbar-spacing-bottom-area);
+		padding-inline: var(--spectrum-action-bar-edge-to-content-area);
+		padding-block: var(--spectrum-action-bar-top-to-content-area) var(--spectrum-action-bar-bottom-to-content-area);
 
 		/* Be relative so our width can be restricted */
 		position: relative;
 
-		border-radius: var(--spectrum-actionbar-corner-radius);
-		border-color: var(--highcontrast-actionbar-popover-border-color, var(--spectrum-actionbar-popover-border-color));
-		background-color: var(--spectrum-actionbar-popover-background-color);
+		border-radius: var(--spectrum-corner-radius-medium-size-extra-large);
+		border-color: var(--spectrum-action-bar-border-color);
+		background-color: var(--spectrum-background-elevated-color);
 
-		filter: drop-shadow(var(--spectrum-actionbar-shadow-horizontal) var(--spectrum-actionbar-shadow-vertical) var(--spectrum-actionbar-shadow-blur) var(--spectrum-actionbar-shadow-color));
+		filter: drop-shadow(var(--spectrum-drop-shadow-elevated-x) var(--spectrum-drop-shadow-elevated-y) var(--spectrum-drop-shadow-elevated-blur) var(--spectrum-drop-shadow-elevated-color));
 
 		/* Let clicks do their thing */
 		pointer-events: auto;
@@ -104,25 +64,35 @@
 
 	/* item counter */
 	.spectrum-FieldLabel {
-		--spectrum-fieldlabel-font-size: var(--spectrum-action-bar-counter-font-size);
-		--spectrum-fieldlabel-line-height: var(--spectrum-actionbar-item-counter-line-height);
+		font-size: var(--spectrum-action-bar-counter-font-size);
+		line-height: var(--spectrum-line-height-100);
 
-		color: var(--spectrum-actionbar-item-counter-color);
-		padding-inline-start: var(--spectrum-actionbar-close-button-to-counter);
+		color: var(--spectrum-neutral-content-color-default);
+		padding-inline-start: var(--spectrum-action-bar-close-button-to-counter);
 
 		/* cjk language support */
 		&:lang(ja),
 		&:lang(zh),
 		&:lang(ko) {
-			line-height: var(--spectrum-actionbar-item-counter-line-height-cjk);
+			line-height: var(--spectrum-cjk-line-height-100);
 		}
 	}
 
 	/* action group */
 	.spectrum-ActionGroup {
 		/* align to end by default */
 		margin-inline-start: auto;
-		padding-inline-start: var(--spectrum-actionbar-spacing-label-to-action-group); /* space between label and action group */
+		padding-inline-start: var(--spectrum-action-bar-label-to-action-group-area);
+	}
+
+	&:where(.spectrum-ActionBar--emphasized) {
+		.spectrum-FieldLabel {
+			color: var(--spectrum-gray-25);
+		}
+
+		.spectrum-ActionBar-popover {
+			background-color: var(--spectrum-neutral-content-color-default);
+		}
 	}
 }
 
@@ -143,7 +113,7 @@
 
 /* windows high contrast mode */
 @media (forced-colors: active) {
-	.spectrum-ActionBar {
-		--highcontrast-actionbar-popover-border-color: CanvasText;
+	.spectrum-ActionBar-popover {
+		border-color: CanvasText;
 	}
 }