Skip to content

Commit da24515

Browse files
jnjoshjnjosh
authored
feat(dropindicator)!: migrate to spectrum tokens (#2198)
BREAKING CHANGE: migrates DropIndicator to use `@adobe/spectrum-tokens`
1 parent 7f29eda commit da24515

File tree

10 files changed

+117
-38
lines changed

10 files changed

+117
-38
lines changed

‎components/dropindicator/gulpfile.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
module.exports = require("@spectrum-css/component-builder");
1+
module.exports = require("@spectrum-css/component-builder-simple");

‎components/dropindicator/index.css‎

Lines changed: 54 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -10,54 +10,95 @@ OF ANY KIND, either express or implied. See the License for the specific languag
1010
governing permissions and limitations under the License.
1111
*/
1212

13+
@media (forced-colors: active) {
14+
.spectrum-DropIndicator {
15+
--highcontrast-dropindicator-color: Highlight;
16+
}
17+
}
18+
19+
.spectrum-DropIndicator {
20+
--spectrum-dropindicator-border-color: var(--spectrum-dropindicator-color);
21+
--spectrum-dropindicator-circle-color: var(--spectrum-dropindicator-color);
22+
--spectrum-dropindicator-border-size: var(--spectrum-border-width-200);
23+
--spectrum-dropindicator-circle-size: 12px;
24+
}
25+
1326
.spectrum-DropIndicator {
1427
position: relative;
28+
background: var(
29+
--highcontrast-dropindicator-color,
30+
var(--mod-dropindicator-border-color, var(--spectrum-dropindicator-border-color))
31+
);
1532

1633
&:before,
1734
&:after {
1835
content: '';
1936
position: absolute;
20-
inline-size: var(--spectrum-dropindicator-circle-size);
21-
block-size: var(--spectrum-dropindicator-circle-size);
37+
inline-size: var(
38+
--mod-dropindicator-circle-size,
39+
var(--spectrum-dropindicator-circle-size)
40+
);
41+
block-size: var(
42+
--mod-dropindicator-circle-size,
43+
var(--spectrum-dropindicator-circle-size)
44+
);
2245
border-radius: 50%;
23-
border: var(--spectrum-dropindicator-border-size) solid;
46+
border: var(
47+
--mod-dropindicator-border-size,
48+
var(--spectrum-dropindicator-border-size)) solid;
2449
box-sizing: border-box;
50+
border-color: var(
51+
--highcontrast-dropindicator-color,
52+
var(--mod-dropindicator-circle-color, var(--spectrum-dropindicator-circle-color))
53+
);
2554
}
2655
}
2756

2857
.spectrum-DropIndicator--horizontal {
29-
block-size: var(--spectrum-dropindicator-border-size);
30-
margin: 0 var(--spectrum-dropindicator-circle-size);
58+
block-size: var(
59+
--mod-dropindicator-border-size,
60+
var(--spectrum-dropindicator-border-size)
61+
);
62+
margin: 0 var(
63+
--mod-dropindicator-circle-size,
64+
var(--spectrum-dropindicator-circle-size)
65+
);
3166

3267
&:before,
3368
&:after {
34-
inset-block-start: calc(-1 * var(--spectrum-dropindicator-circle-size) / 2 + var(--spectrum-dropindicator-border-size) / 2);
69+
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);
3570
}
3671

3772
&:before {
38-
inset-inline-start: calc(-1 * var(--spectrum-dropindicator-circle-size));
73+
inset-inline-start: calc(-1 * var(--mod-dropindicator-circle-size, var(--spectrum-dropindicator-circle-size)));
3974
}
4075

4176
&:after {
42-
inset-inline-end: calc(-1 * var(--spectrum-dropindicator-circle-size));
77+
inset-inline-end: calc(-1 * var(--mod-dropindicator-circle-size, var(--spectrum-dropindicator-circle-size)));
4378
}
4479
}
4580

4681
.spectrum-DropIndicator--vertical {
47-
inline-size: var(--spectrum-dropindicator-border-size);
48-
margin-block: var(--spectrum-dropindicator-circle-size);
82+
inline-size: var(
83+
--mod-dropindicator-border-size,
84+
var(--spectrum-dropindicator-border-size)
85+
);
86+
margin-block: var(
87+
--mod-dropindicator-circle-size,
88+
var(--spectrum-dropindicator-circle-size)
89+
);
4990
margin-inline: 0;
5091

5192
&:before,
5293
&:after {
53-
inset-inline-start: calc(-1 * var(--spectrum-dropindicator-circle-size) / 2 + var(--spectrum-dropindicator-border-size) / 2);
94+
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);
5495
}
5596

5697
&:before {
57-
inset-block-start: calc(-1 * var(--spectrum-dropindicator-circle-size));
98+
inset-block-start: calc(-1 * var(--mod-dropindicator-circle-size, var(--spectrum-dropindicator-circle-size)));
5899
}
59100

60101
&:after {
61-
inset-block-end: calc(-1 * var(--spectrum-dropindicator-circle-size));
102+
inset-block-end: calc(-1 * var(--mod-dropindicator-circle-size, var(--spectrum-dropindicator-circle-size)));
62103
}
63104
}

‎components/dropindicator/metadata/mods.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
| Modifiable Custom Properties |
2+
| ---------------------------------- |
3+
| `--mod-dropindicator-border-color` |
4+
| `--mod-dropindicator-border-size` |
5+
| `--mod-dropindicator-circle-color` |
6+
| `--mod-dropindicator-circle-size` |

‎components/dropindicator/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,12 @@
1919
},
2020
"peerDependencies": {
2121
"@spectrum-css/icon": ">=3",
22-
"@spectrum-css/vars": ">=9"
22+
"@spectrum-css/tokens": ">=11"
2323
},
2424
"devDependencies": {
25-
"@spectrum-css/component-builder": "^4.0.14",
25+
"@spectrum-css/component-builder-simple": "^2.0.17",
2626
"@spectrum-css/icon": "^4.0.3",
27-
"@spectrum-css/vars": "^9.0.8",
27+
"@spectrum-css/tokens": "^11.3.6",
2828
"gulp": "^4.0.0"
2929
},
3030
"publishConfig": {

‎components/dropindicator/stories/template.js‎

Lines changed: 26 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,36 @@ import { ifDefined } from "lit/directives/if-defined.js";
44
import { styleMap } from "lit/directives/style-map.js";
55

66
import "../index.css";
7-
import "../skin.css";
87

98
export const Template = ({
109
rootClass = "spectrum-DropIndicator",
1110
customClasses = [],
1211
customStyles = {},
1312
direction = "vertical",
1413
size = "300px",
15-
}) => html`
16-
<div
17-
class=${classMap({
18-
[rootClass]: true,
19-
[`${rootClass}--${direction}`]: typeof direction !== "undefined",
20-
...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
21-
})}
22-
style=${ifDefined(styleMap({
23-
blockSize: direction == "vertical" ? size : undefined,
24-
inlineSize: direction == "horizontal" ? size : undefined,
25-
...customStyles,
26-
}))}
27-
></div>
28-
`;
14+
...globals
15+
}) => {
16+
const { express } = globals;
17+
18+
try {
19+
if (!express) import(/* webpackPrefetch: true */ "../themes/spectrum.css");
20+
else import(/* webpackPrefetch: true */ "../themes/express.css");
21+
} catch (e) {
22+
console.warn(e);
23+
}
24+
25+
return html`
26+
<div
27+
class=${classMap({
28+
[rootClass]: true,
29+
[`${rootClass}--${direction}`]: typeof direction !== "undefined",
30+
...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
31+
})}
32+
style=${ifDefined(styleMap({
33+
blockSize: direction == "vertical" ? size : undefined,
34+
inlineSize: direction == "horizontal" ? size : undefined,
35+
...customStyles,
36+
}))}
37+
></div>
38+
`;
39+
};

‎components/dropindicator/skin.css‎ renamed to ‎components/dropindicator/themes/express.css‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
1010
governing permissions and limitations under the License.
1111
*/
1212

13-
.spectrum-DropIndicator {
14-
background: var(--spectrum-dropindicator-border-color);
15-
16-
&:before,
17-
&:after {
18-
border-color: var(--spectrum-dropindicator-circle-border-color);
13+
@container (--system: express) {
14+
.spectrum-Dropindicator {
1915
}
2016
}

‎components/dropindicator/themes/spectrum.css‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
/*!
2+
Copyright 2023 Adobe. All rights reserved.
3+
This file is licensed to you under the Apache License, Version 2.0 (the "License");
4+
you may not use this file except in compliance with the License. You may obtain a copy
5+
of the License at http://www.apache.org/licenses/LICENSE-2.0
6+
7+
Unless required by applicable law or agreed to in writing, software distributed under
8+
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9+
OF ANY KIND, either express or implied. See the License for the specific language
10+
governing permissions and limitations under the License.
11+
*/
12+
13+
@container (--system: spectrum) {
14+
.spectrum-DropIndicator {
15+
}
16+
}

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,9 @@ governing permissions and limitations under the License.
2020
/* Drop Zone background color rgb */
2121
--spectrum-drop-zone-background-color-rgb: var( --spectrum-blue-900-rgb); /* var(--spectrum-accent-color-900);*/
2222

23+
/* Drop Indicator color rgb */
24+
--spectrum-dropindicator-color: var(--spectrum-blue-700);
25+
2326
--spectrum-calendar-day-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.15);
2427
--spectrum-calendar-day-background-color-hover: rgba(var(--spectrum-white-rgb), 0.07);
2528
--spectrum-calendar-day-today-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.25);

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,9 @@ governing permissions and limitations under the License.
2020
/* Drop Zone background color rgb */
2121
--spectrum-drop-zone-background-color-rgb: var( --spectrum-blue-900-rgb); /* var(--spectrum-accent-color-900);*/
2222

23+
/* Drop Indicator color rgb */
24+
--spectrum-dropindicator-color: var(--spectrum-blue-700);
25+
2326
--spectrum-calendar-day-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.2);
2427
--spectrum-calendar-day-background-color-hover: rgba(var(--spectrum-white-rgb), 0.08);
2528
--spectrum-calendar-day-today-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.3);

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,9 @@ governing permissions and limitations under the License.
2121
/* Drop Zone background color rgb */
2222
--spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-800-rgb); /* var(--spectrum-accent-color-800);*/
2323

24+
/* Drop Indicator color rgb */
25+
--spectrum-dropindicator-color: var(--spectrum-blue-800);
26+
2427
--spectrum-calendar-day-background-color-selected: rgba(var(--spectrum-blue-900-rgb), 0.1);
2528
--spectrum-calendar-day-background-color-hover: rgba(var(--spectrum-black-rgb), 0.06);
2629
--spectrum-calendar-day-today-background-color-selected-hover: rgba(var(--spectrum-blue-900-rgb), 0.2);

0 commit comments

Comments
 (0)