Skip to content

Commit 66e629e

Browse files
jnjoshjnjosh
committed
feat(dropindicator): migrate to spectrum tokens
1 parent db5d42e commit 66e629e

File tree

10 files changed

+101
-24
lines changed

10 files changed

+101
-24
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-circle-border-color: var(--highcontrast-dropindicator-color, var(--spectrum-dropindicator-color));
21+
--spectrum-dropindicator-border-color: var(--highcontrast-dropindicator-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+
--mod-dropindicator-border-color,
30+
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+
--mod-dropindicator-circle-border-color,
52+
var(--spectrum-dropindicator-circle-border-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-border-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: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,28 @@ import { classMap } from "lit/directives/class-map.js";
33
import { styleMap } from "lit/directives/style-map.js";
44

55
import "../index.css";
6-
import "../skin.css";
76

87
export const Template = ({
98
rootClass = "spectrum-DropIndicator",
109
customClasses = [],
1110
direction = "vertical",
1211
size = "300px",
12+
...globals
1313
}) => {
1414
const styles = {
1515
"block-size": direction == "vertical" ? size : "",
1616
"inline-size": direction == "horizontal" ? size : "",
1717
};
1818

19+
const { express } = globals;
20+
21+
try {
22+
if (!express) import(/* webpackPrefetch: true */ "../themes/spectrum.css");
23+
else import(/* webpackPrefetch: true */ "../themes/express.css");
24+
} catch (e) {
25+
console.warn(e);
26+
}
27+
1928
return html`
2029
<div
2130
class=${classMap({

‎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)