feat: bug fixes for reducing theming variables

adobe · Dec 3, 2024 · 52d9ab0 · 52d9ab0
1 parent 4a5714a
commit 52d9ab0
Show file tree

Hide file tree

Showing 87 changed files with 2,052 additions and 2,071 deletions.
diff --git a/.storybook/assets/index.css b/.storybook/assets/index.css
@@ -26,9 +26,6 @@ body {
 	font-family: var(--spectrum-font-family);
 	font-size: var(--spectrum-font-size);
 	font-style: var(--spectrum-font-style);
-
-	color: var(--spectrum-neutral-content-color-default);
-	background-color: var(--spectrum-background-layer-2-color);
 }
 
 body:lang(ar) {
@@ -72,15 +69,9 @@ div.sb-bar > div > div > span:first-child {
 	display: none;
 }
 
-div.sb-bar > div > div > div > button {
-	background-color: white !important;
-}
-
 .docblock-argstable-body tr td {
 	letter-spacing: unset;
 	font-size: 11px;
-	color: rgb(34, 34, 34);
-	background-color: rgb(255, 255, 255);
 }
 
 .docblock-argstable-body td > span:has(select),
@@ -128,11 +119,4 @@ select:focus,
 	border-color: rgb(2, 101, 220) !important;
 	box-shadow: rgb(2, 101, 220) 0 0 0 1px inset !important;
 }
-
-nav.sidebar-container,
-div.sb-bar {
-	color: var(--spectrum-neutral-content-color-default) !important;
-	background-color: var(--spectrum-background-layer-2-color) !important;
-}
-
 /* stylelint-enable selector-class-pattern */
diff --git a/.storybook/decorators/utilities.js b/.storybook/decorators/utilities.js
@@ -331,10 +331,12 @@ export const ArgGrid = ({
 export const Sizes = ({
 	withHeading = true,
 	withBorder = false,
+	withWrapperBorder = true,
 	...args
 } = {}, context = {}) => {
 	return ArgGrid({
 		withBorder,
+		withWrapperBorder,
 		heading: withHeading ? "Sizing" : undefined,
 		argKey: "size",
 		labels: {

diff --git a/.storybook/manager.js b/.storybook/manager.js
@@ -12,39 +12,54 @@ addons.setConfig({
 	theme: create({
 		base: "light",
 
-		brandTitle: "Spectrum CSS",
+		brandTitle: "Adobe | Spectrum CSS",
 		brandUrl: pkg.homepage ?? "https://opensource.adobe.com/spectrum-css",
 		brandImage: logo,
+		brandTarget: "_self",
 
 		typography: {
 			fonts: {
-				base: "adobe-clean, \"Source Sans Pro\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Ubuntu, \"Trebuchet MS\", \"Lucida Grande\", sans-serif",
+				base: "adobe-clean, \"Adobe Clean\", \"Source Sans Pro\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Ubuntu, \"Trebuchet MS\", \"Lucida Grande\", sans-serif",
 				code: "\"Source Code Pro\", Monaco, monospace",
 			}
 		},
 
+		// colorPrimary: "#7326d3",
 		colorSecondary: "rgb(2, 101, 220)",
 
-		// UI
-		appBg:
-			"rgb(255,255,255)" /* Being applied to the active state of radio buttons */,
-		appContentBg: "rgb(255, 255, 255)" /* Being applied to the arg table */,
+		/* Being applied to the active state of radio buttons */
+		appBg: "rgb(255, 255, 255)",
+		/* Being applied to the arg table */
+		appContentBg: "rgb(255, 255, 255)",
+		// appPreviewBg: "rgb(248, 248, 248)",
 		appBorderColor: "rgb(213, 213, 213)",
 		appBorderRadius: 4,
 
-		// Text colors
+		/* Text colors */
+		fontBase: "adobe-clean, \"Adobe Clean\", \"Source Sans Pro\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Ubuntu, \"Trebuchet MS\", \"Lucida Grande\", sans-serif",
+		fontCode: "\"Source Code Pro\", Monaco, monospace",
 		textColor: "rgb(34, 34, 34)",
+		textInverseColor: "rgb(219, 219, 219)",
+		textMutedColor: "rgb(175, 175, 175)",
 
-		// Toolbar default and active colors
+		/* Toolbar default and active colors */
 		barTextColor: "rgb(34, 34, 34)",
+		barHoverColor: "rgb(2, 101, 220)",
 		barSelectedColor: "rgb(2, 101, 220)",
-		// barBg: 'rgb(248, 248, 248)',
+		barBg: "rgb(255, 255, 255)",
 
-		// Form colors
+		// buttonBg: "rgb(255, 255, 255)",
+		// buttonBorder: "transparent",
+		// booleanBg: "rgb(255, 255, 255)",
+		// booleanSelectedBg: "rgb(213, 213, 213)",
+
+		/* Form colors */
 		inputBg: "rgb(255, 255, 255)",
 		inputBorder: "rgb(177, 177, 177)",
 		inputTextColor: "rgb(34, 34, 34)",
 		inputBorderRadius: 4,
+
+		// gridCellSize?: number;
 	}),
 	sidebar: {
 		showRoots: false,

diff --git a/.storybook/modes/index.js b/.storybook/modes/index.js
@@ -12,30 +12,30 @@
  */
 
 const modes = {
-    // "Context: Spectrum 2": {
-    //     scale: "medium",
-    //     color: "light",
-    //     textDirection: "ltr",
-    //     context: "spectrum",
-    // },
+    "Context: Spectrum 2": {
+        scale: "medium",
+        color: "light",
+        textDirection: "ltr",
+        context: "spectrum",
+    },
     "Context: Spectrum 1": {
         scale: "medium",
         color: "light",
         textDirection: "ltr",
         context: "legacy",
     },
-    // "Context: Express": {
-    //     scale: "medium",
-    //     color: "light",
-    //     textDirection: "ltr",
-    //     context: "express",
-    // },
-    // "Dark | RTL": {
-    //     scale: "medium",
-    //     color: "dark",
-    //     textDirection: "rtl",
-    //     context: "legacy",
-    // },
+    "Context: Express": {
+        scale: "medium",
+        color: "light",
+        textDirection: "ltr",
+        context: "express",
+    },
+    "Dark | RTL": {
+        scale: "medium",
+        color: "dark",
+        textDirection: "rtl",
+        context: "legacy",
+    },
 };
 
 export default modes;

diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -1,3 +1,15 @@
+<!-- Metadata -->
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+<link rel="icon" type="image/svg+xml" href="/favicon.svg">
+<meta name="theme-color" content="#5258e4" />
+
+<title>Adobe | Spectrum CSS</title>
+
+<meta property="og:site_name" content="Adobe | Spectrum CSS" />
+<meta property="og:type" content="website" />
+
 <!-- This preconnect opens the connection for typekit to more quickly load fonts -->
 <link rel="preconnect" href="https://use.typekit.net" crossorigin />
 

diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -88,7 +88,9 @@ export const parameters = {
 		page: DocumentationTemplate,
 		story: { inline: true },
 		source: {
-			type: "dynamic",
+			dark: false,
+			excludeDecorators: true,
+			type: "auto",
 			language: "html",
 		},
 	},

diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css
@@ -82,9 +82,6 @@
 	}
 
 	&.spectrum-ActionButton--staticBlack {
-		/* background color _not_ selected is coming from the system theme layer */
-		--mod-actionbutton-background-color-disabled: transparent;
-
 		--mod-actionbutton-background-color-default-selected: var(--spectrum-transparent-black-800);
 		--mod-actionbutton-background-color-hover-selected: var(--spectrum-transparent-black-900);
 		--mod-actionbutton-background-color-down-selected: var(--spectrum-transparent-black-900);
@@ -136,7 +133,7 @@
 		--mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected, var(--spectrum-actionbutton-background-color-selected-hover));
 		--mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected, var(--spectrum-actionbutton-background-color-selected-down));
 		--mod-actionbutton-background-color-focus: var(--mod-actionbutton-background-color-focus-selected, var(--spectrum-actionbutton-background-color-selected-focus));
-		--mod-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color);
+		--mod-actionbutton-background-color-disabled: var(--spectrum-actionbutton-background-color-selected-disabled);
 
 		--mod-actionbutton-border-color-default: transparent;
 		--mod-actionbutton-border-color-hover: transparent;
@@ -170,7 +167,7 @@
 
 	&:disabled,
 	&.is-disabled {
-		--mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-disabled, var(--spectrum-actionbutton-background-color-disabled));
+		--mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-disabled, transparent);
 		--mod-actionbutton-border-color-default: var(--mod-actionbutton-border-color-disabled, var(--spectrum-actionbutton-border-color-disabled));
 		--mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-disabled, var(--spectrum-disabled-content-color));
 	}
@@ -248,7 +245,7 @@
 
 	position: relative;
 
-	min-inline-size: var(--mod-actionbutton-min-width, calc((var(--spectrum-actionbutton-edge-to-visual-only) - var(--spectrum-actionbutton-border-width)) * 2 + var(--spectrum-actionbutton-icon-size)));
+	min-inline-size: var(--mod-actionbutton-min-width, calc(var(--mod-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-sized-edge-to-visual-only)) * 2 + var(--spectrum-actionbutton-icon-size)));
 	block-size: var(--spectrum-actionbutton-height);
 
 	border-radius: var(--spectrum-actionbutton-border-radius);
@@ -294,6 +291,7 @@ a.spectrum-ActionButton {
 	@extend %spectrum-AnchorButton;
 }
 
+/* Nested sub-component: Icon */
 .spectrum-ActionButton-icon {
 	@extend %spectrum-ButtonIcon;
 

diff --git a/components/actionbutton/metadata/metadata.json b/components/actionbutton/metadata/metadata.json
@@ -98,11 +98,11 @@
     "--spectrum-action-button-edge-to-hold-icon-small",
     "--spectrum-actionbutton-background-color",
     "--spectrum-actionbutton-background-color-default",
-    "--spectrum-actionbutton-background-color-disabled",
     "--spectrum-actionbutton-background-color-down",
     "--spectrum-actionbutton-background-color-focus",
     "--spectrum-actionbutton-background-color-hover",
     "--spectrum-actionbutton-background-color-selected",
+    "--spectrum-actionbutton-background-color-selected-disabled",
     "--spectrum-actionbutton-background-color-selected-down",
     "--spectrum-actionbutton-background-color-selected-focus",
     "--spectrum-actionbutton-background-color-selected-hover",
@@ -165,7 +165,6 @@
     "--spectrum-component-height-50",
     "--spectrum-component-height-75",
     "--spectrum-corner-radius-100",
-    "--spectrum-disabled-background-color",
     "--spectrum-disabled-border-color",
     "--spectrum-disabled-content-color",
     "--spectrum-disabled-static-black-border-color",
@@ -204,6 +203,7 @@
     "--spectrum-text-to-visual-300",
     "--spectrum-text-to-visual-50",
     "--spectrum-text-to-visual-75",
+    "--spectrum-transparent-black-100",
     "--spectrum-transparent-black-400",
     "--spectrum-transparent-black-500",
     "--spectrum-transparent-black-600",
@@ -225,11 +225,11 @@
   ],
   "system-theme": [
     "--system-action-button-background-color-default",
-    "--system-action-button-background-color-disabled",
     "--system-action-button-background-color-down",
     "--system-action-button-background-color-focus",
     "--system-action-button-background-color-hover",
     "--system-action-button-background-color-selected",
+    "--system-action-button-background-color-selected-disabled",
     "--system-action-button-background-color-selected-down",
     "--system-action-button-background-color-selected-focus",
     "--system-action-button-background-color-selected-hover",

diff --git a/components/actionbutton/themes/express.css b/components/actionbutton/themes/express.css
@@ -21,7 +21,6 @@
 		--spectrum-actionbutton-background-color-hover: var(--spectrum-gray-300);
 		--spectrum-actionbutton-background-color-down: var(--spectrum-gray-400);
 		--spectrum-actionbutton-background-color-focus: var(--spectrum-gray-300);
-		--spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color);
 
 		--spectrum-actionbutton-border-color-default: transparent;
 		--spectrum-actionbutton-border-color-hover: transparent;

diff --git a/components/actionbutton/themes/spectrum-two.css b/components/actionbutton/themes/spectrum-two.css
@@ -17,7 +17,7 @@
 		--spectrum-actionbutton-background-color-hover: var(--spectrum-gray-100);
 		--spectrum-actionbutton-background-color-down: var(--spectrum-gray-200);
 		--spectrum-actionbutton-background-color-focus: var(--spectrum-gray-100);
-		--spectrum-actionbutton-background-color-disabled: transparent;
+		--spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-transparent-black-100);
 
 		--spectrum-actionbutton-background-color-selected: var(--spectrum-neutral-background-color-selected-default);
 		--spectrum-actionbutton-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover);

diff --git a/components/actionbutton/themes/spectrum.css b/components/actionbutton/themes/spectrum.css
@@ -21,6 +21,7 @@
 		--spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200);
 		--spectrum-actionbutton-background-color-down: var(--spectrum-gray-300);
 		--spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200);
+		--spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-transparent-black-200);
 
 		--spectrum-actionbutton-content-color-selected: var(--spectrum-gray-75);
 

diff --git a/components/actiongroup/index.css b/components/actiongroup/index.css
@@ -72,7 +72,7 @@
 		z-index: 0;
 
 		&:first-child {
-			/* Action button passthrough styling */
+			/* @passthrough -- Action button styling */
 			--mod-actionbutton-focus-indicator-border-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0px 0px var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
 
 			border-start-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
@@ -81,15 +81,15 @@
 		}
 
 		& + .spectrum-ActionGroup-item {
-			/* Action button passthrough styling */
+			/* @passthrough -- Action button styling */
 			--mod-actionbutton-focus-indicator-border-radius: 0px;
 
 			margin-inline-start: var(--mod-actiongroup-horizontal-spacing-compact, var(--spectrum-actiongroup-horizontal-spacing-compact));
 			margin-inline-end: var(--mod-actiongroup-horizontal-spacing-compact, var(--spectrum-actiongroup-horizontal-spacing-compact));
 		}
 
 		&:last-child {
-			/* Action button passthrough styling */
+			/* @passthrough -- Action button styling */
 			--mod-actionbutton-focus-indicator-border-radius: 0px var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0px;
 
 			border-start-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
@@ -124,7 +124,7 @@
 		border-radius: var(--mod-actiongroup-border-radius-reset, var(--spectrum-actiongroup-border-radius-reset));
 
 		&:first-child {
-			/* Action button passthrough styling */
+			/* @passthrough -- Action button styling */
 			--mod-actionbutton-focus-indicator-border-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0px 0px;
 
 			border-start-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
@@ -142,7 +142,7 @@
 		}
 
 		&:last-child {
-			/* Action button passthrough styling */
+			/* @passthrough -- Action button styling */
 			--mod-actionbutton-focus-indicator-border-radius: 0px 0px var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
 
 			border-end-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));

diff --git a/components/avatar/index.css b/components/avatar/index.css
@@ -98,7 +98,7 @@
 	opacity: var(--mod-avatar-color-opacity, var(--spectrum-avatar-color-opacity));
 
 	&.is-disabled {
-		opacity: var(--highcontrast-avatar-color-opacity-disabled, var(--mod-avatar-color-opacity-disabled, var(--spectrum-avatar-color-opacity-disabled)));
+		opacity: var(--mod-avatar-color-opacity-disabled, var(--spectrum-avatar-color-opacity-disabled));
 	}
 }
 

diff --git a/components/avatar/metadata/metadata.json b/components/avatar/metadata/metadata.json
@@ -54,8 +54,5 @@
   ],
   "system-theme": [],
   "passthroughs": [],
-  "high-contrast": [
-    "--highcontrast-avatar-color-opacity-disabled",
-    "--highcontrast-avatar-focus-indicator-color"
-  ]
+  "high-contrast": ["--highcontrast-avatar-focus-indicator-color"]
 }