From da245154b601e995665b40d86c746c990e0b35bf Mon Sep 17 00:00:00 2001 From: Josh Johnson Date: Wed, 8 Nov 2023 09:42:42 -0500 Subject: [PATCH] feat(dropindicator)!: migrate to spectrum tokens (#2198) BREAKING CHANGE: migrates DropIndicator to use `@adobe/spectrum-tokens` --- components/dropindicator/gulpfile.js | 2 +- components/dropindicator/index.css | 67 +++++++++++++++---- components/dropindicator/metadata/mods.md | 6 ++ components/dropindicator/package.json | 6 +- components/dropindicator/stories/template.js | 41 +++++++----- .../{skin.css => themes/express.css} | 8 +-- components/dropindicator/themes/spectrum.css | 16 +++++ .../custom-spectrum/custom-dark-vars.css | 3 + .../custom-spectrum/custom-darkest-vars.css | 3 + .../custom-spectrum/custom-light-vars.css | 3 + 10 files changed, 117 insertions(+), 38 deletions(-) create mode 100644 components/dropindicator/metadata/mods.md rename components/dropindicator/{skin.css => themes/express.css} (77%) create mode 100644 components/dropindicator/themes/spectrum.css diff --git a/components/dropindicator/gulpfile.js b/components/dropindicator/gulpfile.js index 79fce384ab..aff190165b 100644 --- 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 index e932cd779b..025bda011d 100644 --- 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 new file mode 100644 index 0000000000..92576ff274 --- /dev/null +++ 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 index 95d999cd63..4cdb0d8497 100644 --- 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 index ec7091d4bb..ac1829e540 100644 --- a/components/dropindicator/stories/template.js +++ b/components/dropindicator/stories/template.js @@ -4,7 +4,6 @@ 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", @@ -12,17 +11,29 @@ export const Template = ({ customStyles = {}, direction = "vertical", size = "300px", -}) => html` -
({ ...a, [c]: true }), {}), - })} - style=${ifDefined(styleMap({ - blockSize: direction == "vertical" ? size : undefined, - inlineSize: direction == "horizontal" ? size : undefined, - ...customStyles, - }))} - >
-`; + ...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` +
({ ...a, [c]: true }), {}), + })} + style=${ifDefined(styleMap({ + blockSize: direction == "vertical" ? size : undefined, + inlineSize: direction == "horizontal" ? size : undefined, + ...customStyles, + }))} + >
+ `; +}; diff --git a/components/dropindicator/skin.css b/components/dropindicator/themes/express.css similarity index 77% rename from components/dropindicator/skin.css rename to components/dropindicator/themes/express.css index 945f2fb309..a5fe36c1d2 100644 --- a/components/dropindicator/skin.css +++ b/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 new file mode 100644 index 0000000000..b4755a454f --- /dev/null +++ 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 index 938abab33f..5fbfebc575 100644 --- 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 index a6bb3e1348..38b95e7c47 100644 --- 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 index aa228b4c39..9fadbb4444 100644 --- 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);