feat: bug fixes for reducing theming variables

Author: castastrophe

components/coachindicator/stories/coachindicator.stories.js

@@ -3,7 +3,7 @@ import { isQuiet, staticColor } from "@spectrum-css/preview/types";
 import metadata from "../metadata/metadata.json";
 import packageJson from "../package.json";
 import { CoachIndicatorGroup } from "./coachindicator.test.js";
-import { AllVariantsCoachIndicatorGroup, Template } from "./template.js";
+import { Template } from "./template.js";
 
 /**
  * The coach indicator component can be used to bring added attention to specific parts of a page.
@@ -63,14 +63,14 @@ Default.parameters = {
 };
 Default.tags = ["!autodocs"];
 
-export const DefaultVariants = AllVariantsCoachIndicatorGroup.bind({});
+export const DefaultVariants = Template.bind({});
 DefaultVariants.tags = ["!dev"];
 DefaultVariants.storyName = "Default";
 DefaultVariants.parameters = {
 	chromatic: { disableSnapshot: true }
 };
 
-export const QuietVariants = AllVariantsCoachIndicatorGroup.bind({});
+export const QuietVariants = Template.bind({});
 QuietVariants.tags = ["!dev"];
 QuietVariants.storyName = "Quiet";
 QuietVariants.args = {

components/coachindicator/stories/coachindicator.test.js

@@ -9,22 +9,6 @@ export const CoachIndicatorGroup = Variants({
 			testHeading: "Default",
 			variant: "default",
 		},
-		{
-			testHeading: "Dark",
-			variant: "dark",
-			wrapperStyles: {
-				"background-color": "rgba(248 248 248 / 80%)",
-				"border-radius": "4px",
-			},
-		},
-		{
-			testHeading: "Light",
-			variant: "light",
-			wrapperStyles: {
-				"background-color": "rgba(0 0 0 / 80%)",
-				"border-radius": "4px",
-			},
-		},
 		{
 			testHeading: "Static White",
 			staticColor: "white"

components/coachindicator/stories/template.js

@@ -1,4 +1,3 @@
-import { Container } from "@spectrum-css/preview/decorators";
 import { html } from "lit-html";
 import { classMap } from "lit-html/directives/class-map.js";
 import { styleMap } from "lit-html/directives/style-map.js";
@@ -22,7 +21,6 @@ export const Template = ({
 				[`${rootClass}`]: true,
 				[`${rootClass}--quiet`]: isQuiet,
 				[`${rootClass}--${variant}`]: typeof variant !== "undefined" || variant !== "default",
-				[`${rootClass}--overBackground`]: staticColor === "white",
 				[`${rootClass}--staticWhite`]: staticColor === "white",
 				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
 			})}
@@ -34,29 +32,3 @@ export const Template = ({
 		</div>
 	`;
 };
-
-/* This template group showcases multiple coach indicator variants at once. */
-export const AllVariantsCoachIndicatorGroup = (args, context) => Container({
-	withBorder: false,
-	content: html`
-		${Container({
-			direction: "column",
-			withBorder: false,
-			heading: "Default",
-			content: Template({ ...args, variant: "default" }, context)
-		}, context)}
-		${Container({
-			direction: "column",
-			withBorder: false,
-			heading: "Dark",
-			content: Template({ ...args, variant: "dark" }, context)
-		}, context)}
-		${Container({
-			direction: "column",
-			withBorder: false,
-			heading: "Light",
-			content: Template({ ...args, variant: "light" }, context)
-
-		}, context)}
-	`
-}, context);

components/datepicker/index.css

@@ -67,7 +67,7 @@
     "--mod-datepicker-padding-inline",
     "--mod-datepicker-padding-inline-end-invalid",
     "--mod-datepicker-padding-inline-end-invalid-quiet",
-    "--mod-datepicker-padding-inline-end-quiet",
+    "--mod-datepicker-padding-inline-quiet",
     "--mod-datepicker-pickerbutton-border-color",
     "--mod-datepicker-pickerbutton-border-color-invalid",
     "--mod-datepicker-quiet-border-color-hover",

components/datepicker/metadata/metadata.json

@@ -25,7 +25,7 @@
 | `--mod-datepicker-padding-inline`                    |
 | `--mod-datepicker-padding-inline-end-invalid`        |
 | `--mod-datepicker-padding-inline-end-invalid-quiet`  |
-| `--mod-datepicker-padding-inline-end-quiet`          |
+| `--mod-datepicker-padding-inline-quiet`              |
 | `--mod-datepicker-pickerbutton-border-color`         |
 | `--mod-datepicker-pickerbutton-border-color-invalid` |
 | `--mod-datepicker-quiet-border-color-hover`          |

components/datepicker/metadata/mods.md

@@ -14,6 +14,19 @@
 @import "@spectrum-css/commons/overlay.css";
 @import "./themes/spectrum-two.css";
 
+
+.spectrum-Modal {
+	--spectrum-modal-confirm-entry-animation-duration: var(--mod-modal-confirm-entry-animation-duration, var(--spectrum-animation-duration-500));
+	--spectrum-modal-confirm-entry-animation-delay: var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-animation-duration-200));
+	--spectrum-modal-confirm-exit-animation-duration: var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-animation-duration-100));
+
+	/* Bug: this must be 0ms, not 0 */
+	--spectrum-modal-confirm-exit-animation-delay: var(--mod-modal-confirm-exit-animation-delay, var(--spectrum-animation-duration-0));
+
+	/* Distance between top and bottom of modal and edge of window for fullscreen modal */
+	--spectrum-modal-fullscreen-margin: var(--mod-modal-fullscreen-margin, 32px);
+}
+
 /* Used to position the modal */
 .spectrum-Modal-wrapper {
 	position: fixed;
@@ -55,17 +68,9 @@
 }
 
 .spectrum-Modal {
-	/* Bug: this must be 0ms, not 0 */
-	--spectrum-modal-confirm-exit-animation-delay: var(--spectrum-animation-duration-0);
-
-	/* Distance between top and bottom of modal and edge of window for fullscreen modal */
-	--spectrum-modal-fullscreen-margin: 32px;
-
-	--spectrum-modal-confirm-exit-animation-duration: var(--spectrum-animation-duration-100);
-	--spectrum-modal-confirm-entry-animation-duration: var(--spectrum-animation-duration-500);
-	--spectrum-modal-confirm-entry-animation-delay: var(--spectrum-animation-duration-200);
-
-	@extend %spectrum-overlay;
+	pointer-events: none;
+	visibility: hidden;
+	opacity: 0;
 
 	/* Start offset by the animation distance -- @note this is using the global dialog token */
 	transform: translateY(var(--mod-modal-confirm-entry-animation-distance, var(--spectrum-dialog-confirm-entry-animation-distance)));
@@ -78,26 +83,27 @@
 	max-inline-size: var(--mod-modal-max-width, 90%);
 
 	background: var(--mod-modal-background-color, var(--spectrum-modal-background-color));
-
-	/* border-radius includes legacy token fallback, which can be deprecated once component is migrated */
 	border-radius: var(--mod-modal-confirm-border-radius, var(--spectrum-corner-radius-100));
 	overflow: hidden;
 	outline: none; /* Firefox shows outline */
 	pointer-events: auto;
 
 	/* Exit animations */
 	transition:
-		opacity var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-modal-confirm-exit-animation-duration)) var(--spectrum-animation-ease-in) var(--mod-modal-confirm-exit-animation-delay, var(--spectrum-modal-confirm-exit-animation-delay)),
-		visibility 0ms linear calc(var(--mod-modal-confirm-exit-animation-delay, var(--spectrum-modal-confirm-exit-animation-delay)) + var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-modal-confirm-exit-animation-duration))),
-		transform 0ms linear calc(var(--mod-modal-confirm-exit-animation-delay, var(--spectrum-modal-confirm-exit-animation-delay)) + var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-modal-confirm-exit-animation-duration)));
+		opacity var(--spectrum-modal-confirm-exit-animation-duration) var(--spectrum-animation-ease-in) var(--spectrum-modal-confirm-exit-animation-delay),
+		visibility 0ms linear calc(var(--spectrum-modal-confirm-exit-animation-delay) + var(--spectrum-modal-confirm-exit-animation-duration)),
+		transform 0ms linear calc(var(--spectrum-modal-confirm-exit-animation-delay) + var(--spectrum-modal-confirm-exit-animation-duration));
 
 	&.is-open {
-		@extend %spectrum-overlay--open;
+		pointer-events: auto;
+		visibility: visible;
+		opacity: 1;
 
 		/* Entry animations */
+		transition-delay: var(--mod-overlay-animation-duration-opened, var(--spectrum-animation-duration-0, 0ms));
 		transition:
-			transform var(--mod-modal-confirm-entry-animation-duration, var(--spectrum-modal-confirm-entry-animation-duration)) var(--spectrum-animation-ease-out) var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-modal-confirm-entry-animation-delay)),
-			opacity var(--mod-modal-confirm-entry-animation-duration, var(--spectrum-modal-confirm-entry-animation-duration)) var(--spectrum-animation-ease-out) var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-modal-confirm-entry-animation-delay));
+			transform var(--spectrum-modal-confirm-entry-animation-duration) var(--spectrum-animation-ease-out) var(--spectrum-modal-confirm-entry-animation-delay),
+			opacity var(--spectrum-modal-confirm-entry-animation-duration) var(--spectrum-animation-ease-out) var(--spectrum-modal-confirm-entry-animation-delay);
 
 		transform: translateY(0);
 	}
@@ -123,10 +129,10 @@
 /** @unofficial */
 .spectrum-Modal--fullscreen {
 	position: fixed;
-	inset-inline-start: var(--mod-modal-fullscreen-margin, var(--spectrum-modal-fullscreen-margin));
-	inset-block-start: var(--mod-modal-fullscreen-margin, var(--spectrum-modal-fullscreen-margin));
-	inset-inline-end: var(--mod-modal-fullscreen-margin, var(--spectrum-modal-fullscreen-margin));
-	inset-block-end: var(--mod-modal-fullscreen-margin, var(--spectrum-modal-fullscreen-margin));
+	inset-inline-start: var(--spectrum-modal-fullscreen-margin);
+	inset-block-start: var(--spectrum-modal-fullscreen-margin);
+	inset-inline-end: var(--spectrum-modal-fullscreen-margin);
+	inset-block-end: var(--spectrum-modal-fullscreen-margin);
 	max-inline-size: none;
 	max-block-size: none;
 }

components/modal/index.css

@@ -1,7 +1,6 @@
 {
   "sourceFile": "index.css",
   "selectors": [
-    ".is-open:scope",
     ".spectrum-Modal",
     ".spectrum-Modal--fullscreen",
     ".spectrum-Modal--fullscreenTakeover",
@@ -24,7 +23,6 @@
     "--mod-modal-max-height",
     "--mod-modal-max-width",
     "--mod-modal-transition-animation-duration",
-    "--mod-overlay-animation-duration",
     "--mod-overlay-animation-duration-opened"
   ],
   "component": [

components/modal/metadata/metadata.json

@@ -11,5 +11,4 @@
 | `--mod-modal-max-height`                       |
 | `--mod-modal-max-width`                        |
 | `--mod-modal-transition-animation-duration`    |
-| `--mod-overlay-animation-duration`             |
 | `--mod-overlay-animation-duration-opened`      |

components/modal/metadata/mods.md

@@ -66,12 +66,12 @@
 	background-color: var(--spectrum-tray-background-color);
 
 	&.is-open {
+		transform: translateY(0);
+
 		/* Entry animations */
 		transition:
 			transform var(--spectrum-tray-entry-animation-duration) cubic-bezier(0, 0, 0.4, 1) var(--spectrum-tray-entry-animation-delay),
 			opacity var(--spectrum-tray-entry-animation-duration) cubic-bezier(0, 0, 0.4, 1) var(--spectrum-tray-entry-animation-delay);
-
-		transform: translateY(0);
 	}
 }