feat: corner rounding (#3133)

* feat: corner rounding --------- Co-authored-by: Patrick Fulton <[email protected]> Co-authored-by: Cory Dransfeldt <[email protected]> Co-authored-by: Aziz Ramos <[email protected]> Co-authored-by: Josh Winn <[email protected]> Co-authored-by: Rise Erpelding <[email protected]> Co-authored-by: Marissa Huysentruyt <[email protected]> Co-authored-by: Rajdeep Chandra <[email protected]> Co-authored-by: TarunAdobe <[email protected]> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
adobe · Oct 9, 2024 · 2193991 · 2193991
1 parent 0625419
commit 2193991
Show file tree

Hide file tree

Showing 282 changed files with 25,454 additions and 17 deletions.
diff --git a/.changeset/spicy-poets-build.md b/.changeset/spicy-poets-build.md
@@ -0,0 +1,87 @@
+---
+"@spectrum-css/floatingactionbutton": major
+"@spectrum-css/opacitycheckerboard": major
+"@spectrum-css/illustratedmessage": major
+"@spectrum-css/coachindicator": major
+"@spectrum-css/contextualhelp": major
+"@spectrum-css/progresscircle": major
+"@spectrum-css/dropindicator": major
+"@spectrum-css/infieldbutton": major
+"@spectrum-css/actionbutton": major
+"@spectrum-css/pickerbutton": major
+"@spectrum-css/actiongroup": major
+"@spectrum-css/alertbanner": major
+"@spectrum-css/alertdialog": major
+"@spectrum-css/buttongroup": major
+"@spectrum-css/clearbutton": major
+"@spectrum-css/closebutton": major
+"@spectrum-css/colorhandle": major
+"@spectrum-css/colorslider": major
+"@spectrum-css/inlinealert": major
+"@spectrum-css/logicbutton": major
+"@spectrum-css/progressbar": major
+"@spectrum-css/statuslight": major
+"@spectrum-css/swatchgroup": major
+"@spectrum-css/actionmenu": major
+"@spectrum-css/breadcrumb": major
+"@spectrum-css/colorloupe": major
+"@spectrum-css/colorwheel": major
+"@spectrum-css/datepicker": major
+"@spectrum-css/fieldgroup": major
+"@spectrum-css/fieldlabel": major
+"@spectrum-css/pagination": major
+"@spectrum-css/typography": major
+"@spectrum-css/accordion": major
+"@spectrum-css/actionbar": major
+"@spectrum-css/assetcard": major
+"@spectrum-css/assetlist": major
+"@spectrum-css/coachmark": major
+"@spectrum-css/colorarea": major
+"@spectrum-css/splitview": major
+"@spectrum-css/textfield": major
+"@spectrum-css/thumbnail": major
+"@spectrum-css/calendar": major
+"@spectrum-css/checkbox": major
+"@spectrum-css/combobox": major
+"@spectrum-css/dropzone": major
+"@spectrum-css/helptext": major
+"@spectrum-css/steplist": major
+"@spectrum-css/taggroup": major
+"@spectrum-css/treeview": major
+"@spectrum-css/underlay": major
+"@spectrum-css/commons": major
+"@spectrum-css/divider": major
+"@spectrum-css/popover": major
+"@spectrum-css/sidenav": major
+"@spectrum-css/stepper": major
+"@spectrum-css/tooltip": major
+"@spectrum-css/avatar": major
+"@spectrum-css/button": major
+"@spectrum-css/dialog": major
+"@spectrum-css/miller": major
+"@spectrum-css/picker": major
+"@spectrum-css/rating": major
+"@spectrum-css/search": major
+"@spectrum-css/slider": major
+"@spectrum-css/swatch": major
+"@spectrum-css/switch": major
+"@spectrum-css/asset": major
+"@spectrum-css/badge": major
+"@spectrum-css/modal": major
+"@spectrum-css/radio": major
+"@spectrum-css/table": major
+"@spectrum-css/toast": major
+"@spectrum-css/card": major
+"@spectrum-css/dial": major
+"@spectrum-css/icon": major
+"@spectrum-css/link": major
+"@spectrum-css/menu": major
+"@spectrum-css/tabs": major
+"@spectrum-css/tray": major
+"@spectrum-css/well": major
+"@spectrum-css/tag": major
+"@spectrum-css/ui-icons": major
+"@spectrum-css/tokens": major
+---
+
+Pull in the corner radii updates for S2
diff --git a/.storybook/assets/base.css b/.storybook/assets/base.css
@@ -27,6 +27,12 @@ body {
 	background-color: var(--spectrum-background-base-color, rgb(230, 230, 230));
 }
 
+nav.sidebar-container,
+div.sb-bar {
+	color: var(--spectrum-neutral-content-color-default);
+	background-color: var(--spectrum-background-base-color);
+}
+
 nav.sidebar-container,
 div.sb-bar {
 	color: var(--spectrum-neutral-content-color-default);

diff --git a/components/assetlist/stories/template.js b/components/assetlist/stories/template.js
@@ -24,7 +24,7 @@ export const AssetListItem = ({
 	isSelected = false,
 	isBranch = false,
 	onclick = () => {},
-}) => html`
+} = {}, context = {}) => html`
 	<li
 		class=${classMap({
 			[rootClass]: true,
@@ -43,7 +43,7 @@ export const AssetListItem = ({
 				ariaLabelledby,
 				id: checkboxId,
 				customClasses: [`${rootClass}Selector`],
-			})
+			}, context)
 		)}
 		${when(image, () => 
 			html`<img src=${image} class="${rootClass}Thumbnail" alt="asset image thumbnail" />`
@@ -53,7 +53,7 @@ export const AssetListItem = ({
 				iconName,
 				setName: iconSet,
 				customClasses: [`${rootClass}Thumbnail`],
-			})
+			}, context)
 		)}
 		${when(label, () => html`<span class="${rootClass}Label">${label}</span>`)}
 		${when(!isSelectable && !isBranch, () =>
@@ -63,13 +63,13 @@ export const AssetListItem = ({
 				ariaLabelledby,
 				id: checkboxId,
 				customClasses: [`${rootClass}Selector`],
-			}))}
+			}, context))}
 		${when(isBranch, () =>
 			Icon({
 				iconName: "ChevronRight100",
 				setName: "ui",
 				customClasses: [`${rootClass}ChildIndicator`],
-			})
+			}, context)
 		)}
 	</li>
 `;

diff --git a/components/badge/stories/template.js b/components/badge/stories/template.js
@@ -22,7 +22,7 @@ export const Template = ({
 	customStyles = {},
 	customClasses = [],
 	id = getRandomId("badge"),
-} = {}) => {
+} = {}, context = {}) => {
 	return html`
 		<div
 			class=${classMap({
@@ -46,7 +46,7 @@ export const Template = ({
 							: []),
 						`${rootClass}-icon`,
 					],
-				}),
+				}, context),
 			)}
 			${when(label, () => html`<div class="${rootClass}-label">${label}</div>`)}
 		</div>

diff --git a/components/pickerbutton/metadata/metadata.json b/components/pickerbutton/metadata/metadata.json
@@ -140,7 +140,7 @@
     "--spectrum-component-height-300",
     "--spectrum-component-height-75",
     "--spectrum-corner-radius-100",
-    "--spectrum-corner-radius-200",
+    "--spectrum-corner-radius-500",
     "--spectrum-default-font-style",
     "--spectrum-disabled-background-color",
     "--spectrum-disabled-content-color",

diff --git a/components/pickerbutton/themes/spectrum-two.css b/components/pickerbutton/themes/spectrum-two.css
@@ -32,7 +32,7 @@
 		--spectrum-picker-button-label-padding: var(--spectrum-text-to-visual-50);
 		--spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-100);
 
-		--spectrum-picker-button-border-radius-rounded: var(--spectrum-corner-radius-200);
+		--spectrum-picker-button-border-radius-rounded: var(--spectrum-corner-radius-500);
 
 		--spectrum-picker-button-icon-color: var(--spectrum-neutral-content-color-default);
 		--spectrum-picker-button-icon-color-hover: var(--spectrum-neutral-content-color-hover);

diff --git a/components/pickerbutton/themes/spectrum.css b/components/pickerbutton/themes/spectrum.css
@@ -21,5 +21,6 @@
 		--spectrum-picker-button-background-color-hover: var(--spectrum-gray-200);
 		--spectrum-picker-button-background-color-down: var(--spectrum-gray-300);
 		--spectrum-picker-button-background-color-key-focus: var(--spectrum-gray-200);
+		--spectrum-picker-button-border-radius-rounded: var(--spectrum-corner-radius-200);
 	}
 }
diff --git a/components/slider/metadata/metadata.json b/components/slider/metadata/metadata.json
@@ -232,7 +232,7 @@
     "--spectrum-component-top-to-text-100",
     "--spectrum-component-top-to-text-200",
     "--spectrum-component-top-to-text-75",
-    "--spectrum-corner-radius-200",
+    "--spectrum-corner-radius-500",
     "--spectrum-corner-radius-75",
     "--spectrum-disabled-background-color",
     "--spectrum-disabled-border-color",

diff --git a/components/slider/themes/spectrum-two.css b/components/slider/themes/spectrum-two.css
@@ -73,7 +73,7 @@
 			--spectrum-slider-font-size: var(--spectrum-font-size-75);
 			--spectrum-slider-handle-size: var(--spectrum-slider-handle-size-small);
 			--spectrum-slider-control-height: var(--spectrum-component-height-75);
-			--spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200);
+			--spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-500);
 			--spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-small);
 			--spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-75);
 			--spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-small);
@@ -85,7 +85,7 @@
 			--spectrum-slider-font-size: var(--spectrum-font-size-75);
 			--spectrum-slider-handle-size: var(--spectrum-slider-handle-size-medium);
 			--spectrum-slider-control-height: var(--spectrum-component-height-100);
-			--spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200);
+			--spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-500);
 			--spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-medium);
 			--spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-75);
 			--spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-medium);
@@ -96,7 +96,7 @@
 			--spectrum-slider-font-size: var(--spectrum-font-size-100);
 			--spectrum-slider-handle-size: var(--spectrum-slider-handle-size-large);
 			--spectrum-slider-control-height: var(--spectrum-component-height-200);
-			--spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4);
+			--spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-500) * 4);
 			--spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-large);
 			--spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-100);
 			--spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-large);
@@ -110,7 +110,7 @@
 			--spectrum-slider-font-size: var(--spectrum-font-size-200);
 			--spectrum-slider-handle-size: var(--spectrum-slider-handle-size-extra-large);
 			--spectrum-slider-control-height: var(--spectrum-component-height-300);
-			--spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4);
+			--spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-500) * 4);
 			--spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-extra-large);
 			--spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-200);
 			--spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-extra-large);

diff --git a/components/slider/themes/spectrum.css b/components/slider/themes/spectrum.css
@@ -23,5 +23,22 @@
 		--spectrum-slider-ticks-handle-background-color: var(--spectrum-gray-100);
 		--spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-100);
 		--spectrum-slider-tick-mark-color: var(--spectrum-gray-300);
+
+		&.spectrum-Slider--sizeS {
+			--spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200);
+		}
+
+		&,
+		&.spectrum-Slider--sizeM {
+			--spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200);
+		}
+
+		&.spectrum-Slider--sizeL {
+			--spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4);
+		}
+
+		&.spectrum-Slider--sizeXL {
+			--spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4);
+		}
 	}
 }
diff --git a/stylelint.config.js b/stylelint.config.js
@@ -180,7 +180,6 @@ module.exports = {
 			},
 		},
 		{
-			/* Validate that the legacy themes don't introduce any new selectors or custom properties */
 			files: ["components/*/themes/spectrum.css", "components/*/themes/express.css", "tokens/**/*.css"],
 			rules: {
 				"spectrum-tools/no-unused-custom-properties": null,

diff --git a/tokens/dist/css/components/bridge/accordion.css b/tokens/dist/css/components/bridge/accordion.css
@@ -0,0 +1,54 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+.spectrum.spectrum--express {
+	--spectrum-accordion-item-width: var(--system-accordion-item-width);
+	--spectrum-accordion-disclosure-indicator-to-text-space: var(--system-accordion-disclosure-indicator-to-text-space);
+	--spectrum-accordion-edge-to-disclosure-indicator-space: var(--system-accordion-edge-to-disclosure-indicator-space);
+	--spectrum-accordion-edge-to-text-space: var(--system-accordion-edge-to-text-space);
+	--spectrum-accordion-focus-indicator-gap: var(--system-accordion-focus-indicator-gap);
+	--spectrum-accordion-focus-indicator-thickness: var(--system-accordion-focus-indicator-thickness);
+	--spectrum-accordion-corner-radius: var(--system-accordion-corner-radius);
+	--spectrum-accordion-item-content-area-top-to-content: var(--system-accordion-item-content-area-top-to-content);
+	--spectrum-accordion-item-content-area-bottom-to-content: var(--system-accordion-item-content-area-bottom-to-content);
+	--spectrum-accordion-item-header-font: var(--system-accordion-item-header-font);
+	--spectrum-accordion-item-header-font-weight: var(--system-accordion-item-header-font-weight);
+	--spectrum-accordion-item-header-font-style: var(--system-accordion-item-header-font-style);
+	--spectrum-accordion-item-header-line-height: var(--system-accordion-spacious-size-xl-item-header-line-height);
+	--spectrum-accordion-item-content-font: var(--system-accordion-item-content-font);
+	--spectrum-accordion-item-content-font-weight: var(--system-accordion-item-content-font-weight);
+	--spectrum-accordion-item-content-font-style: var(--system-accordion-item-content-font-style);
+	--spectrum-accordion-item-content-line-height: var(--system-accordion-item-content-line-height);
+	--spectrum-accordion-background-color-default: var(--system-accordion-background-color-default);
+	--spectrum-accordion-background-color-hover: var(--system-accordion-background-color-hover);
+	--spectrum-accordion-background-color-down: var(--system-accordion-background-color-down);
+	--spectrum-accordion-background-color-key-focus: var(--system-accordion-background-color-key-focus);
+	--spectrum-accordion-item-header-color-default: var(--system-accordion-item-header-color-default);
+	--spectrum-accordion-item-header-color-hover: var(--system-accordion-item-header-color-hover);
+	--spectrum-accordion-item-header-color-down: var(--system-accordion-item-header-color-down);
+	--spectrum-accordion-item-header-color-key-focus: var(--system-accordion-item-header-color-key-focus);
+	--spectrum-accordion-item-header-disabled-color: var(--system-accordion-item-header-disabled-color);
+	--spectrum-accordion-item-content-disabled-color: var(--system-accordion-item-content-disabled-color);
+	--spectrum-accordion-item-content-color: var(--system-accordion-item-content-color);
+	--spectrum-accordion-focus-indicator-color: var(--system-accordion-focus-indicator-color);
+	--spectrum-accordion-divider-color: var(--system-accordion-divider-color);
+	--spectrum-accordion-item-header-line-height-cjk: var(--system-accordion-item-header-line-height-cjk);
+	--spectrum-accordion-item-content-line-height-cjk: var(--system-accordion-item-content-line-height-cjk);
+	--spectrum-accordion-item-height: var(--system-accordion-compact-size-xl-item-height);
+	--spectrum-accordion-disclosure-indicator-height: var(--system-accordion-size-xl-disclosure-indicator-height);
+	--spectrum-accordion-component-edge-to-text: var(--system-accordion-size-xl-component-edge-to-text);
+	--spectrum-accordion-item-header-font-size: var(--system-accordion-size-xl-item-header-font-size);
+	--spectrum-accordion-item-content-font-size: var(--system-accordion-size-xl-item-content-font-size);
+	--spectrum-accordion-item-header-top-to-text-space: var(--system-accordion-spacious-size-xl-item-header-top-to-text-space);
+	--spectrum-accordion-item-header-bottom-to-text-space: var(--system-accordion-spacious-size-xl-item-header-bottom-to-text-space);
+}
diff --git a/tokens/dist/css/components/bridge/actionbar.css b/tokens/dist/css/components/bridge/actionbar.css
@@ -0,0 +1,37 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+.spectrum.spectrum--express {
+	--spectrum-actionbar-height: var(--system-action-bar-height);
+	--spectrum-actionbar-corner-radius: var(--system-action-bar-corner-radius);
+	--spectrum-actionbar-item-counter-font-size: var(--system-action-bar-item-counter-font-size);
+	--spectrum-actionbar-item-counter-line-height: var(--system-action-bar-item-counter-line-height);
+	--spectrum-actionbar-item-counter-color: var(--system-action-bar-item-counter-color);
+	--spectrum-actionbar-item-counter-line-height-cjk: var(--system-action-bar-item-counter-line-height-cjk);
+	--spectrum-actionbar-popover-background-color: var(--system-action-bar-popover-background-color);
+	--spectrum-actionbar-popover-border-color: var(--system-action-bar-popover-border-color);
+	--spectrum-actionbar-emphasized-background-color: var(--system-action-bar-emphasized-background-color);
+	--spectrum-actionbar-emphasized-item-counter-color: var(--system-action-bar-emphasized-item-counter-color);
+	--spectrum-actionbar-spacing-outer-edge: var(--system-action-bar-spacing-outer-edge);
+	--spectrum-actionbar-spacing-close-button-top: var(--system-action-bar-spacing-close-button-top);
+	--spectrum-actionbar-spacing-close-button-start: var(--system-action-bar-spacing-close-button-start);
+	--spectrum-actionbar-spacing-close-button-end: var(--system-action-bar-spacing-close-button-end);
+	--spectrum-actionbar-spacing-item-counter-top: var(--system-action-bar-spacing-item-counter-top);
+	--spectrum-actionbar-spacing-item-counter-end: var(--system-action-bar-spacing-item-counter-end);
+	--spectrum-actionbar-spacing-action-group-top: var(--system-action-bar-spacing-action-group-top);
+	--spectrum-actionbar-spacing-action-group-end: var(--system-action-bar-spacing-action-group-end);
+	--spectrum-actionbar-shadow-horizontal: var(--system-action-bar-shadow-horizontal);
+	--spectrum-actionbar-shadow-vertical: var(--system-action-bar-shadow-vertical);
+	--spectrum-actionbar-shadow-blur: var(--system-action-bar-shadow-blur);
+	--spectrum-actionbar-shadow-color: var(--system-action-bar-shadow-color);
+}