Skip to content

Commit 11926c5

Browse files
jnjoshjnjosh
committed
feat(dropindicator): migrate to spectrum tokens
1 parent a0ff750 commit 11926c5

File tree

7 files changed

+86
-24
lines changed

7 files changed

+86
-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: 48 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -10,54 +10,89 @@ 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+
--spectrum-dropindicator-circle-border-color: var(--spectrum-blue-800);
15+
--spectrum-dropindicator-border-color: var(--spectrum-blue-800);
16+
--spectrum-dropindicator-border-size: var(--spectrum-border-width-200);
17+
--spectrum-dropindicator-circle-size: 12px;
18+
}
19+
1320
.spectrum-DropIndicator {
1421
position: relative;
22+
background: var(
23+
--mod-dropindicator-border-color,
24+
var(--spectrum-dropindicator-border-color)
25+
);
1526

1627
&:before,
1728
&:after {
1829
content: '';
1930
position: absolute;
20-
inline-size: var(--spectrum-dropindicator-circle-size);
21-
block-size: var(--spectrum-dropindicator-circle-size);
31+
inline-size: var(
32+
--mod-dropindicator-circle-size,
33+
var(--spectrum-dropindicator-circle-size)
34+
);
35+
block-size: var(
36+
--mod-dropindicator-circle-size,
37+
var(--spectrum-dropindicator-circle-size)
38+
);
2239
border-radius: 50%;
23-
border: var(--spectrum-dropindicator-border-size) solid;
40+
border: var(
41+
--mod-dropindicator-border-size,
42+
var(--spectrum-dropindicator-border-size)) solid;
2443
box-sizing: border-box;
44+
border-color: var(
45+
--mod-dropindicator-circle-border-color,
46+
var(--spectrum-dropindicator-circle-border-color)
47+
);
2548
}
2649
}
2750

2851
.spectrum-DropIndicator--horizontal {
29-
block-size: var(--spectrum-dropindicator-border-size);
30-
margin: 0 var(--spectrum-dropindicator-circle-size);
52+
block-size: var(
53+
--mod-dropindicator-border-size,
54+
var(--spectrum-dropindicator-border-size)
55+
);
56+
margin: 0 var(
57+
--mod-dropindicator-circle-size,
58+
var(--spectrum-dropindicator-circle-size)
59+
);
3160

3261
&:before,
3362
&:after {
34-
inset-block-start: calc(-1 * var(--spectrum-dropindicator-circle-size) / 2 + var(--spectrum-dropindicator-border-size) / 2);
63+
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);
3564
}
3665

3766
&:before {
38-
inset-inline-start: calc(-1 * var(--spectrum-dropindicator-circle-size));
67+
inset-inline-start: calc(-1 * var(--mod-dropindicator-circle-size, var(--spectrum-dropindicator-circle-size)));
3968
}
4069

4170
&:after {
42-
inset-inline-end: calc(-1 * var(--spectrum-dropindicator-circle-size));
71+
inset-inline-end: calc(-1 * var(--mod-dropindicator-circle-size, var(--spectrum-dropindicator-circle-size)));
4372
}
4473
}
4574

4675
.spectrum-DropIndicator--vertical {
47-
inline-size: var(--spectrum-dropindicator-border-size);
48-
margin-block: var(--spectrum-dropindicator-circle-size);
76+
inline-size: var(
77+
--mod-dropindicator-border-size,
78+
var(--spectrum-dropindicator-border-size)
79+
);;
80+
margin-block: var(
81+
--mod-dropindicator-circle-size,
82+
var(--spectrum-dropindicator-circle-size)
83+
);
4984
margin-inline: 0;
5085

5186
&:before,
5287
&:after {
53-
inset-inline-start: calc(-1 * var(--spectrum-dropindicator-circle-size) / 2 + var(--spectrum-dropindicator-border-size) / 2);
88+
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);
5489
}
5590

5691
&:before {
57-
inset-block-start: calc(-1 * var(--spectrum-dropindicator-circle-size));
92+
inset-block-start: calc(-1 * var(--mod-dropindicator-circle-size, var(--spectrum-dropindicator-circle-size)));
5893
}
5994

6095
&:after {
61-
inset-block-end: calc(-1 * var(--spectrum-dropindicator-circle-size));
96+
inset-block-end: calc(-1 * var(--mod-dropindicator-circle-size, var(--spectrum-dropindicator-circle-size)));
6297
}
6398
}

‎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+
}

0 commit comments

Comments
 (0)