docs(textarea): add figma assets to design tab (#3327)

* docs(textarea): add figma assets to design tab --------- Co-authored-by: castastrophe <[email protected]> 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: 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 · Nov 12, 2024 · 52906ef · 52906ef
1 parent e00f5e7
commit 52906ef
Show file tree

Hide file tree

Showing 69 changed files with 1,772 additions and 1,731 deletions.
diff --git a/.storybook/assets/base.css b/.storybook/assets/base.css
@@ -28,31 +28,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);
-	background-color: var(--spectrum-background-layer-2-color);
-}
-
-/* Layers around the components */
-body.spectrum,
-.docs-story {
+.spectrum {
 	color: var(--spectrum-neutral-content-color-default);
 	background-color: var(--spectrum-background-layer-1-color);
 	-webkit-tap-highlight-color: rgba(0, 0, 0, 0%);
 }
 
-.sb-story [data-inner-container] {
-	padding: 0 !important;
-	border: none !important;
-}
-
 /* Hide the SVG elements that only include references */
 svg:has(symbol):not(:has(use)) {
 	display: none;

diff --git a/.storybook/assets/index.css b/.storybook/assets/index.css
@@ -28,7 +28,7 @@ body {
 	font-style: var(--spectrum-font-style);
 
 	color: var(--spectrum-neutral-content-color-default);
-	background-color: var(--spectrum-background-base-color);
+	background-color: var(--spectrum-background-layer-2-color);
 }
 
 body:lang(ar) {

diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,6 +1,6 @@
-import remarkGfm from 'remark-gfm';
 import fs from "fs";
 import path from "path";
+import remarkGfm from 'remark-gfm';
 
 // Get a list of all the folders in the components directory
 const componentDir = path.resolve(__dirname, "../components");
@@ -33,6 +33,8 @@ export default {
 			name: "@storybook/addon-essentials",
 			// Supported booleans: actions, controls, docs, toolbars, measure, outline.
 			options: {
+				// Don't need viewports b/c the medium/large contexts are used to support scaling.
+				viewport: false,
 				// Don't need backgrounds b/c this is handled by the color contexts.
 				backgrounds: false,
 				// Configure separately

diff --git a/components/accordion/metadata/metadata.json b/components/accordion/metadata/metadata.json
@@ -2,20 +2,6 @@
   "sourceFile": "index.css",
   "selectors": [
     ".spectrum-Accordion",
-    ".spectrum-Accordion--compact",
-    ".spectrum-Accordion--compact.spectrum-Accordion--sizeL",
-    ".spectrum-Accordion--compact.spectrum-Accordion--sizeM",
-    ".spectrum-Accordion--compact.spectrum-Accordion--sizeS",
-    ".spectrum-Accordion--compact.spectrum-Accordion--sizeXL",
-    ".spectrum-Accordion--sizeL",
-    ".spectrum-Accordion--sizeM",
-    ".spectrum-Accordion--sizeS",
-    ".spectrum-Accordion--sizeXL",
-    ".spectrum-Accordion--spacious",
-    ".spectrum-Accordion--spacious.spectrum-Accordion--sizeL",
-    ".spectrum-Accordion--spacious.spectrum-Accordion--sizeM",
-    ".spectrum-Accordion--spacious.spectrum-Accordion--sizeS",
-    ".spectrum-Accordion--spacious.spectrum-Accordion--sizeXL",
     ".spectrum-Accordion-item",
     ".spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemContent",
     ".spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemHeader",
@@ -39,6 +25,20 @@
     ".spectrum-Accordion-itemHeading",
     ".spectrum-Accordion-itemIconContainer",
     ".spectrum-Accordion-itemIconContainer:dir(rtl)",
+    ".spectrum-Accordion.spectrum-Accordion--compact",
+    ".spectrum-Accordion.spectrum-Accordion--compact.spectrum-Accordion--sizeL",
+    ".spectrum-Accordion.spectrum-Accordion--compact.spectrum-Accordion--sizeM",
+    ".spectrum-Accordion.spectrum-Accordion--compact.spectrum-Accordion--sizeS",
+    ".spectrum-Accordion.spectrum-Accordion--compact.spectrum-Accordion--sizeXL",
+    ".spectrum-Accordion.spectrum-Accordion--sizeL",
+    ".spectrum-Accordion.spectrum-Accordion--sizeM",
+    ".spectrum-Accordion.spectrum-Accordion--sizeS",
+    ".spectrum-Accordion.spectrum-Accordion--sizeXL",
+    ".spectrum-Accordion.spectrum-Accordion--spacious",
+    ".spectrum-Accordion.spectrum-Accordion--spacious.spectrum-Accordion--sizeL",
+    ".spectrum-Accordion.spectrum-Accordion--spacious.spectrum-Accordion--sizeM",
+    ".spectrum-Accordion.spectrum-Accordion--spacious.spectrum-Accordion--sizeS",
+    ".spectrum-Accordion.spectrum-Accordion--spacious.spectrum-Accordion--sizeXL",
     ".spectrum-Accordion:dir(rtl)",
     ".spectrum-Accordion:lang(ja)",
     ".spectrum-Accordion:lang(ko)",

diff --git a/components/accordion/themes/spectrum-two.css b/components/accordion/themes/spectrum-two.css
@@ -61,100 +61,100 @@
 
 		--spectrum-accordion-item-header-line-height-cjk: var(--spectrum-cjk-line-height-100);
 		--spectrum-accordion-item-content-line-height-cjk: var(--spectrum-cjk-line-height-100);
-	}
-
-	.spectrum-Accordion,
-	.spectrum-Accordion--sizeM {
-		--spectrum-accordion-item-height: var(--spectrum-component-height-200);
-		--spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-100);
-		--spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-75);
-		--spectrum-accordion-item-header-font-size: var(--spectrum-font-size-300);
-		--spectrum-accordion-item-content-font-size: var(--spectrum-body-size-s);
-		--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-medium);
-		--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-medium);
-	}
-
-	.spectrum-Accordion--sizeS {
-		--spectrum-accordion-item-height: var(--spectrum-component-height-100);
-		--spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-75);
-		--spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-50);
-		--spectrum-accordion-item-header-font-size: var(--spectrum-font-size-200);
-		--spectrum-accordion-item-content-font-size: var(--spectrum-body-size-xs);
-		--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-small);
-		--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-small);
-	}
-
-	.spectrum-Accordion--sizeL {
-		--spectrum-accordion-item-height: var(--spectrum-component-height-300);
-		--spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-200);
-		--spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-100);
-		--spectrum-accordion-item-header-font-size: var(--spectrum-font-size-500);
-		--spectrum-accordion-item-content-font-size: var(--spectrum-body-size-m);
-		--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-large);
-		--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-large);
-	}
-
-	.spectrum-Accordion--sizeXL {
-		--spectrum-accordion-item-height: var(--spectrum-component-height-400);
-		--spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-300);
-		--spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-200);
-		--spectrum-accordion-item-header-font-size: var(--spectrum-font-size-700);
-		--spectrum-accordion-item-content-font-size: var(--spectrum-body-size-l);
-		--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-extra-large);
-		--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-extra-large);
-	}
-
-	.spectrum-Accordion--compact {
-		&.spectrum-Accordion--sizeS {
-			--spectrum-accordion-item-height: var(--spectrum-component-height-75);
-			--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-small);
-			--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-small);
-		}
 
 		&,
 		&.spectrum-Accordion--sizeM {
-			--spectrum-accordion-item-height: var(--spectrum-component-height-100);
-			--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-medium);
-			--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-medium);
-		}
-
-		&.spectrum-Accordion--sizeL {
 			--spectrum-accordion-item-height: var(--spectrum-component-height-200);
-			--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-large);
-			--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-large);
+			--spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-100);
+			--spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-75);
+			--spectrum-accordion-item-header-font-size: var(--spectrum-font-size-300);
+			--spectrum-accordion-item-content-font-size: var(--spectrum-body-size-s);
+			--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-medium);
+			--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-medium);
 		}
 
-		&.spectrum-Accordion--sizeXL {
-			--spectrum-accordion-item-height: var(--spectrum-component-height-300);
-			--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-extra-large);
-			--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-extra-large);
+		&.spectrum-Accordion--sizeS {
+			--spectrum-accordion-item-height: var(--spectrum-component-height-100);
+			--spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-75);
+			--spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-50);
+			--spectrum-accordion-item-header-font-size: var(--spectrum-font-size-200);
+			--spectrum-accordion-item-content-font-size: var(--spectrum-body-size-xs);
+			--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-small);
+			--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-small);
 		}
-	}
 
-	.spectrum-Accordion--spacious {
-		&.spectrum-Accordion--sizeS {
-			--spectrum-accordion-item-header-line-height: 1.25;
-			--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-small-top-to-text-spacious);
-			--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-small);
+		&.spectrum-Accordion--sizeL {
+			--spectrum-accordion-item-height: var(--spectrum-component-height-300);
+			--spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-200);
+			--spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-100);
+			--spectrum-accordion-item-header-font-size: var(--spectrum-font-size-500);
+			--spectrum-accordion-item-content-font-size: var(--spectrum-body-size-m);
+			--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-large);
+			--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-large);
 		}
 
-		&,
-		&.spectrum-Accordion--sizeM {
-			--spectrum-accordion-item-header-line-height: 1.278;
-			--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-medium);
-			--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-medium);
+		&.spectrum-Accordion--sizeXL {
+			--spectrum-accordion-item-height: var(--spectrum-component-height-400);
+			--spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-300);
+			--spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-200);
+			--spectrum-accordion-item-header-font-size: var(--spectrum-font-size-700);
+			--spectrum-accordion-item-content-font-size: var(--spectrum-body-size-l);
+			--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-extra-large);
+			--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-extra-large);
 		}
 
-		&.spectrum-Accordion--sizeL {
-			--spectrum-accordion-item-header-line-height: 1.273;
-			--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-large);
-			--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-large);
+		&.spectrum-Accordion--compact {
+			&.spectrum-Accordion--sizeS {
+				--spectrum-accordion-item-height: var(--spectrum-component-height-75);
+				--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-small);
+				--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-small);
+			}
+
+			&,
+			&.spectrum-Accordion--sizeM {
+				--spectrum-accordion-item-height: var(--spectrum-component-height-100);
+				--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-medium);
+				--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-medium);
+			}
+
+			&.spectrum-Accordion--sizeL {
+				--spectrum-accordion-item-height: var(--spectrum-component-height-200);
+				--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-large);
+				--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-large);
+			}
+
+			&.spectrum-Accordion--sizeXL {
+				--spectrum-accordion-item-height: var(--spectrum-component-height-300);
+				--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-extra-large);
+				--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-extra-large);
+			}
 		}
 
-		&.spectrum-Accordion--sizeXL {
-			--spectrum-accordion-item-header-line-height: 1.25;
-			--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-extra-large);
-			--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-extra-large);
+		&.spectrum-Accordion--spacious {
+			&.spectrum-Accordion--sizeS {
+				--spectrum-accordion-item-header-line-height: 1.25;
+				--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-small-top-to-text-spacious);
+				--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-small);
+			}
+
+			&,
+			&.spectrum-Accordion--sizeM {
+				--spectrum-accordion-item-header-line-height: 1.278;
+				--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-medium);
+				--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-medium);
+			}
+
+			&.spectrum-Accordion--sizeL {
+				--spectrum-accordion-item-header-line-height: 1.273;
+				--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-large);
+				--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-large);
+			}
+
+			&.spectrum-Accordion--sizeXL {
+				--spectrum-accordion-item-header-line-height: 1.25;
+				--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-extra-large);
+				--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-extra-large);
+			}
 		}
 	}
 }
diff --git a/components/actionbutton/metadata/metadata.json b/components/actionbutton/metadata/metadata.json
@@ -2,11 +2,6 @@
   "sourceFile": "index.css",
   "selectors": [
     ".spectrum-ActionButton",
-    ".spectrum-ActionButton--sizeL",
-    ".spectrum-ActionButton--sizeM",
-    ".spectrum-ActionButton--sizeS",
-    ".spectrum-ActionButton--sizeXL",
-    ".spectrum-ActionButton--sizeXS",
     ".spectrum-ActionButton-hold",
     ".spectrum-ActionButton-hold + .spectrum-ActionButton-icon",
     ".spectrum-ActionButton-icon",
@@ -22,6 +17,11 @@
     ".spectrum-ActionButton.is-selected.spectrum-ActionButton--staticBlack",
     ".spectrum-ActionButton.is-selected.spectrum-ActionButton--staticWhite",
     ".spectrum-ActionButton.spectrum-ActionButton--quiet",
+    ".spectrum-ActionButton.spectrum-ActionButton--sizeL",
+    ".spectrum-ActionButton.spectrum-ActionButton--sizeM",
+    ".spectrum-ActionButton.spectrum-ActionButton--sizeS",
+    ".spectrum-ActionButton.spectrum-ActionButton--sizeXL",
+    ".spectrum-ActionButton.spectrum-ActionButton--sizeXS",
     ".spectrum-ActionButton.spectrum-ActionButton--staticBlack",
     ".spectrum-ActionButton.spectrum-ActionButton--staticBlack.is-selected",
     ".spectrum-ActionButton.spectrum-ActionButton--staticBlack.is-selected.spectrum-ActionButton--emphasized",