feat(dropindicator)!: migrate to spectrum tokens (#2198)

BREAKING CHANGE: migrates DropIndicator to use `@adobe/spectrum-tokens`
adobe · Nov 8, 2023 · da24515 · da24515
1 parent 7f29eda
commit da24515
Show file tree

Hide file tree

Showing 10 changed files with 117 additions and 38 deletions.
diff --git a/components/dropindicator/gulpfile.js b/components/dropindicator/gulpfile.js
@@ -1 +1 @@
-module.exports = require("@spectrum-css/component-builder");
+module.exports = require("@spectrum-css/component-builder-simple");
diff --git a/components/dropindicator/index.css b/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)));
  }
 }
diff --git a/components/dropindicator/metadata/mods.md b/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` |
diff --git a/components/dropindicator/package.json b/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": {

diff --git a/components/dropindicator/stories/template.js b/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>
+ `;
+};
diff --git a/components/dropindicator/skin.css → components/dropindicator/themes/express.css b/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 {
  }
 }
diff --git a/components/dropindicator/themes/spectrum.css b/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 {
+ }
+}
diff --git a/components/tokens/custom-spectrum/custom-dark-vars.css b/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);

diff --git a/components/tokens/custom-spectrum/custom-darkest-vars.css b/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);

diff --git a/components/tokens/custom-spectrum/custom-light-vars.css b/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);