feat(dropindicator): migrate to spectrum tokens

components/dropindicator/gulpfile.js

@@ -1 +1 @@
-module.exports = require("@spectrum-css/component-builder");
+module.exports = require("@spectrum-css/component-builder-simple");

components/dropindicator/index.css

@@ -10,54 +10,95 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
+@media (forced-colors: active) {
+  .spectrum-DropIndicator {
+      --highcontrast-dropindicator-color: Highlight;
+  }
+}
+
+.spectrum-DropIndicator {
+  --spectrum-dropindicator-border-color: var(--spectrum-dropindicator-color);
+  --spectrum-dropindicator-circle-color: var(--spectrum-dropindicator-color);
+  --spectrum-dropindicator-border-size: var(--spectrum-border-width-200);
+  --spectrum-dropindicator-circle-size: 12px;
+}
+
 .spectrum-DropIndicator {
   position: relative;
+  background: var(
+    --highcontrast-dropindicator-color,
+    var(--mod-dropindicator-border-color, var(--spectrum-dropindicator-border-color))
+  );
 
   &:before,
   &:after {
     content: '';
     position: absolute;
-    inline-size: var(--spectrum-dropindicator-circle-size);
-    block-size: var(--spectrum-dropindicator-circle-size);
+    inline-size: var(
+      --mod-dropindicator-circle-size,
+      var(--spectrum-dropindicator-circle-size)
+    );
+    block-size: var(
+      --mod-dropindicator-circle-size,
+      var(--spectrum-dropindicator-circle-size)
+    );
     border-radius: 50%;
-    border: var(--spectrum-dropindicator-border-size) solid;
+    border: var(
+      --mod-dropindicator-border-size,
+      var(--spectrum-dropindicator-border-size)) solid;
     box-sizing: border-box;
+    border-color: var(
+      --highcontrast-dropindicator-color,
+      var(--mod-dropindicator-circle-color, var(--spectrum-dropindicator-circle-color))
+    );
   }
 }
 
 .spectrum-DropIndicator--horizontal {
-  block-size: var(--spectrum-dropindicator-border-size);
-  margin: 0 var(--spectrum-dropindicator-circle-size);
+  block-size: var(
+    --mod-dropindicator-border-size,
+    var(--spectrum-dropindicator-border-size)
+  );
+  margin: 0 var(
+    --mod-dropindicator-circle-size,
+    var(--spectrum-dropindicator-circle-size)
+  );
 
   &:before,
   &:after {
-    inset-block-start: calc(-1 * var(--spectrum-dropindicator-circle-size) / 2 + var(--spectrum-dropindicator-border-size) / 2);
+    inset-block-start: calc(-1 * var(--mod-dropindicator-circle-size, var(--spectrum-dropindicator-circle-size)) / 2 + var(--mod-dropindicator-border-size, var(--spectrum-dropindicator-border-size)) / 2);
   }
 
   &:before {
-    inset-inline-start: calc(-1 * var(--spectrum-dropindicator-circle-size));
+    inset-inline-start: calc(-1 * var(--mod-dropindicator-circle-size, var(--spectrum-dropindicator-circle-size)));
   }
 
   &:after {
-    inset-inline-end: calc(-1 * var(--spectrum-dropindicator-circle-size));
+    inset-inline-end: calc(-1 * var(--mod-dropindicator-circle-size, var(--spectrum-dropindicator-circle-size)));
   }
 }
 
 .spectrum-DropIndicator--vertical {
-  inline-size: var(--spectrum-dropindicator-border-size);
-  margin-block: var(--spectrum-dropindicator-circle-size);
+  inline-size: var(
+    --mod-dropindicator-border-size,
+    var(--spectrum-dropindicator-border-size)
+  );
+  margin-block: var(
+    --mod-dropindicator-circle-size,
+    var(--spectrum-dropindicator-circle-size)
+  );
   margin-inline: 0;
 
   &:before,
   &:after {
-    inset-inline-start: calc(-1 * var(--spectrum-dropindicator-circle-size) / 2 + var(--spectrum-dropindicator-border-size) / 2);
+    inset-inline-start: calc(-1 * var(--mod-dropindicator-circle-size, var(--spectrum-dropindicator-circle-size)) / 2 + var(--mod-dropindicator-border-size, var(--spectrum-dropindicator-border-size)) / 2);
   }
 
   &:before {
-    inset-block-start: calc(-1 * var(--spectrum-dropindicator-circle-size));
+    inset-block-start: calc(-1 * var(--mod-dropindicator-circle-size, var(--spectrum-dropindicator-circle-size)));
   }
 
   &:after {
-    inset-block-end: calc(-1 * var(--spectrum-dropindicator-circle-size));
+    inset-block-end: calc(-1 * var(--mod-dropindicator-circle-size, var(--spectrum-dropindicator-circle-size)));
   }
 }

components/dropindicator/metadata/mods.md

@@ -0,0 +1,6 @@
+| Modifiable Custom Properties       |
+| ---------------------------------- |
+| `--mod-dropindicator-border-color` |
+| `--mod-dropindicator-border-size`  |
+| `--mod-dropindicator-circle-color` |
+| `--mod-dropindicator-circle-size`  |

components/dropindicator/package.json

@@ -19,12 +19,12 @@
   },
   "peerDependencies": {
     "@spectrum-css/icon": ">=3",
-    "@spectrum-css/vars": ">=9"
+    "@spectrum-css/tokens": ">=11"
   },
   "devDependencies": {
-    "@spectrum-css/component-builder": "^4.0.14",
+    "@spectrum-css/component-builder-simple": "^2.0.17",
     "@spectrum-css/icon": "^4.0.3",
-    "@spectrum-css/vars": "^9.0.8",
+    "@spectrum-css/tokens": "^11.3.6",
     "gulp": "^4.0.0"
   },
   "publishConfig": {

components/dropindicator/stories/template.js

@@ -4,25 +4,36 @@ import { ifDefined } from "lit/directives/if-defined.js";
 import { styleMap } from "lit/directives/style-map.js";
 
 import "../index.css";
-import "../skin.css";
 
 export const Template = ({
 	rootClass = "spectrum-DropIndicator",
 	customClasses = [],
 	customStyles = {},
 	direction = "vertical",
 	size = "300px",
-}) => html`
-	<div
-		class=${classMap({
-			[rootClass]: true,
-			[`${rootClass}--${direction}`]: typeof direction !== "undefined",
-			...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
-		})}
-		style=${ifDefined(styleMap({
-			blockSize: direction == "vertical" ? size : undefined,
-			inlineSize: direction == "horizontal" ? size : undefined,
-			...customStyles,
-		}))}
-	></div>
-`;
+	...globals
+}) => {
+	const { express } = globals;
+
+	try {
+		if (!express) import(/* webpackPrefetch: true */ "../themes/spectrum.css");
+		else import(/* webpackPrefetch: true */ "../themes/express.css");
+	} catch (e) {
+		console.warn(e);
+	}
+
+	return html`
+		<div
+			class=${classMap({
+				[rootClass]: true,
+				[`${rootClass}--${direction}`]: typeof direction !== "undefined",
+				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
+			})}
+			style=${ifDefined(styleMap({
+				blockSize: direction == "vertical" ? size : undefined,
+				inlineSize: direction == "horizontal" ? size : undefined,
+				...customStyles,
+			}))}
+		></div>
+	`;
+};

components/dropindicator/skin.css → components/dropindicator/themes/express.css

@@ -10,11 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-.spectrum-DropIndicator {
-  background: var(--spectrum-dropindicator-border-color);
-
-  &:before,
-  &:after {
-    border-color: var(--spectrum-dropindicator-circle-border-color);
+@container (--system: express) {
+  .spectrum-Dropindicator {
   }
 }

components/dropindicator/themes/spectrum.css

@@ -0,0 +1,16 @@
+/*!
+Copyright 2023 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.
+*/
+
+@container (--system: spectrum) {
+  .spectrum-DropIndicator {
+  }
+}

components/tokens/custom-spectrum/custom-dark-vars.css

@@ -20,6 +20,9 @@ governing permissions and limitations under the License.
   /* Drop Zone background color rgb */
   --spectrum-drop-zone-background-color-rgb: var( --spectrum-blue-900-rgb); /* var(--spectrum-accent-color-900);*/
 
+  /* Drop Indicator color rgb */  
+  --spectrum-dropindicator-color: var(--spectrum-blue-700);
+
   --spectrum-calendar-day-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.15);
   --spectrum-calendar-day-background-color-hover: rgba(var(--spectrum-white-rgb), 0.07);
   --spectrum-calendar-day-today-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.25);

components/tokens/custom-spectrum/custom-darkest-vars.css

@@ -20,6 +20,9 @@ governing permissions and limitations under the License.
   /* Drop Zone background color rgb */
   --spectrum-drop-zone-background-color-rgb: var( --spectrum-blue-900-rgb); /* var(--spectrum-accent-color-900);*/
 
+  /* Drop Indicator color rgb */  
+  --spectrum-dropindicator-color: var(--spectrum-blue-700);
+
   --spectrum-calendar-day-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.2);
   --spectrum-calendar-day-background-color-hover: rgba(var(--spectrum-white-rgb), 0.08);
   --spectrum-calendar-day-today-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.3);

components/tokens/custom-spectrum/custom-light-vars.css

@@ -21,6 +21,9 @@ governing permissions and limitations under the License.
   /* Drop Zone background color rgb */
   --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-800-rgb); /* var(--spectrum-accent-color-800);*/
 
+  /* Drop Indicator color rgb */  
+  --spectrum-dropindicator-color: var(--spectrum-blue-800);
+
   --spectrum-calendar-day-background-color-selected: rgba(var(--spectrum-blue-900-rgb), 0.1);
   --spectrum-calendar-day-background-color-hover: rgba(var(--spectrum-black-rgb), 0.06);
   --spectrum-calendar-day-today-background-color-selected-hover: rgba(var(--spectrum-blue-900-rgb), 0.2);