Skip to content

Commit 044c357

Browse files
cdransfcdransf
committed
chore(swatch+swatchgroup): support swatchgroup border
1 parent 7ff47a8 commit 044c357

File tree

9 files changed

+69
-29
lines changed

9 files changed

+69
-29
lines changed

‎.changeset/proud-schools-reply.md

+2
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ An `Add Swatch` variant has been added with the required color tokens and the sp
2323
`--spectrum-swatch-disabled-icon-border-opacity`
2424
`--spectrum-swatch-icon-color`
2525
`--spectrum-swatch-rectangle-width-multiplier`
26+
`--spectrum-swatchgroup-border-color`
2627

2728
##### New mods
2829

@@ -32,5 +33,6 @@ An `Add Swatch` variant has been added with the required color tokens and the sp
3233
`--mod-add-button-background-keyboard-focus`
3334
`--mod-corner-radius-full`
3435
`--mod-mixed-button-background`
36+
--mod-swatchgroup-border-color`
3537
`--mod-swatch-border-color-rgb`
3638
`--mod-swatch-border-opacity`

‎components/swatch/dist/metadata.json

+5-2
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
".spectrum-Swatch",
55
".spectrum-Swatch .spectrum-Swatch-disabledIcon",
66
".spectrum-Swatch .spectrum-Swatch-fill",
7+
".spectrum-Swatch--border .spectrum-Swatch-fill:before",
78
".spectrum-Swatch--lightBorder .spectrum-Swatch-fill:before",
89
".spectrum-Swatch--noBorder .spectrum-Swatch-fill:before",
910
".spectrum-Swatch--rectangle",
@@ -85,7 +86,8 @@
8586
"--mod-swatch-inner-border-color-selected",
8687
"--mod-swatch-size",
8788
"--mod-swatch-slash-icon-color",
88-
"--mod-swatch-slash-thickness"
89+
"--mod-swatch-slash-thickness",
90+
"--mod-swatchgroup-border-color"
8991
],
9092
"component": [
9193
"--spectrum-swatch-border-color-light",
@@ -116,7 +118,8 @@
116118
"--spectrum-swatch-slash-thickness-extra-small",
117119
"--spectrum-swatch-slash-thickness-large",
118120
"--spectrum-swatch-slash-thickness-medium",
119-
"--spectrum-swatch-slash-thickness-small"
121+
"--spectrum-swatch-slash-thickness-small",
122+
"--spectrum-swatchgroup-border-color"
120123
],
121124
"global": [
122125
"--spectrum-add-button-background",

‎components/swatch/index.css

+8
Original file line numberDiff line numberDiff line change
@@ -279,6 +279,14 @@
279279
}
280280
}
281281

282+
.spectrum-Swatch--border {
283+
.spectrum-Swatch-fill {
284+
&::before {
285+
box-shadow: inset 0 0 0 var(--spectrum-swatch-border-thickness) var(--mod-swatchgroup-border-color, var(--spectrum-swatchgroup-border-color));
286+
}
287+
}
288+
}
289+
282290
.spectrum-Swatch--lightBorder {
283291
.spectrum-Swatch-fill {
284292
&::before {

‎components/swatch/stories/template.js

+3
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,9 @@ export const Template = ({
3434
case "none":
3535
borderStyle = "noBorder";
3636
break;
37+
case "border":
38+
borderStyle = "border";
39+
break;
3740
case "light":
3841
borderStyle = "lightBorder";
3942
break;

‎components/swatchgroup/index.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,13 @@
1313

1414
.spectrum-SwatchGroup {
1515
--spectrum-swatchgroup-spacing: var(--spectrum-spacing-75);
16+
}
1617

18+
.spectrum-SwatchGroup {
1719
display: inline-flex;
1820
flex-flow: row wrap;
1921
align-items: flex-start;
2022
justify-content: flex-start;
21-
22-
/* Regular (Default) */
2323
gap: var(--mod-swatchgroup-spacing, var(--spectrum-swatchgroup-spacing));
2424
}
2525

‎components/swatchgroup/stories/swatchgroup.stories.js

+11-1
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ export default {
6868
defaultValue: { summary: "noBorder" },
6969
},
7070
if: { arg: "isSelected", truthy: false },
71-
options: ["noBorder", "lightBorder"],
71+
options: ["noBorder", "border", "lightBorder"],
7272
},
7373
},
7474
args: {
@@ -208,6 +208,16 @@ WithLightBorder.parameters = {
208208
chromatic: { disableSnapshot: true },
209209
};
210210

211+
export const WithBorder = Template.bind({});
212+
WithBorder.args = {
213+
borderStyle: "border",
214+
};
215+
WithBorder.tags = ["!dev"];
216+
WithBorder.storyName = "With border";
217+
WithBorder.parameters = {
218+
chromatic: { disableSnapshot: true },
219+
};
220+
211221
// ********* VRT ONLY ********* //
212222
export const WithForcedColors = SwatchgroupGroup.bind({});
213223
WithForcedColors.tags = ["!autodocs", "!dev"];

‎components/swatchgroup/stories/swatchgroup.test.js

+4
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,10 @@ export const SwatchgroupGroup = Variants({
2323
testHeading: "Regular rounding",
2424
rounding: "regular",
2525
},
26+
{
27+
testHeading: "With borders",
28+
borderStyle: "border",
29+
},
2630
{
2731
testHeading: "With light borders",
2832
borderStyle: "lightBorder",

‎tokens/custom/dark-vars.css

+17-12
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* Copyright 2024 Adobe. All rights reserved.
2+
* Copyright 2025 Adobe. All rights reserved.
33
*
44
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
55
* you may not use this file except in compliance with the License. You may obtain a copy
@@ -24,19 +24,19 @@
2424
--spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-blue-800);
2525
--spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700);
2626

27-
--spectrum-assetlist-item-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.25);
28-
--spectrum-assetlist-item-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.15);
27+
--spectrum-assetlist-item-background-color-selected-hover: rgb(var(--spectrum-blue-800-rgb), 0.25);
28+
--spectrum-assetlist-item-background-color-selected: rgb(var(--spectrum-blue-800-rgb), 0.15);
2929
--spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700);
3030

3131
--spectrum-badge-label-icon-color-primary: var(--spectrum-black);
3232

33-
--spectrum-calendar-day-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.15);
34-
--spectrum-calendar-day-background-color-hover: rgba(var(--spectrum-white-rgb), 0.07);
35-
--spectrum-calendar-day-today-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.25);
36-
--spectrum-calendar-day-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.25);
33+
--spectrum-calendar-day-background-color-selected: rgb(var(--spectrum-blue-800-rgb), 0.15);
34+
--spectrum-calendar-day-background-color-hover: rgb(var(--spectrum-white-rgb), 0.07);
35+
--spectrum-calendar-day-today-background-color-selected-hover: rgb(var(--spectrum-blue-800-rgb), 0.25);
36+
--spectrum-calendar-day-background-color-selected-hover: rgb(var(--spectrum-blue-800-rgb), 0.25);
3737
--spectrum-calendar-day-background-color-down: var(--spectrum-transparent-white-200);
38-
--spectrum-calendar-day-background-color-cap-selected: rgba(var(--spectrum-blue-800-rgb), 0.25);
39-
--spectrum-calendar-day-background-color-key-focus: rgba(var(--spectrum-white-rgb), 0.07);
38+
--spectrum-calendar-day-background-color-cap-selected: rgb(var(--spectrum-blue-800-rgb), 0.25);
39+
--spectrum-calendar-day-background-color-key-focus: rgb(var(--spectrum-white-rgb), 0.07);
4040
--spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700);
4141
--spectrum-card-selected-background-color-rgb: var(--spectrum-blue-500-rgb);
4242

@@ -58,8 +58,13 @@
5858
--spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-700);
5959

6060
--spectrum-swatch-border-color: rgb(255 255 255 / 51%);
61-
--spectrum-swatch-border-color-light: rgb(255 255 255 / var(--swatch-group-border-opacity));
61+
--spectrum-swatch-border-color-light: rgb(255 255 255 / 42%);
6262

63-
--spectrum-treeview-item-background-color-quiet-selected: rgba(var(--spectrum-gray-900-rgb), 0.07);
64-
--spectrum-treeview-item-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.15);
63+
/**
64+
* `--spectrum-swatch-group-border-color` / `--spectrum-swatch-group-border-opacity`
65+
*/
66+
--spectrum-swatchgroup-border-color: rgb(255 255 255 / 20%);
67+
68+
--spectrum-treeview-item-background-color-quiet-selected: rgb(var(--spectrum-gray-900-rgb), 0.07);
69+
--spectrum-treeview-item-background-color-selected: rgb(var(--spectrum-blue-800-rgb), 0.15);
6570
}

‎tokens/custom/light-vars.css

+17-12
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* Copyright 2024 Adobe. All rights reserved.
2+
* Copyright 2025 Adobe. All rights reserved.
33
*
44
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
55
* you may not use this file except in compliance with the License. You may obtain a copy
@@ -22,19 +22,19 @@
2222
--spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-blue-900);
2323
--spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-800);
2424

25-
--spectrum-assetlist-item-background-color-selected-hover: rgba(var(--spectrum-blue-900-rgb), 0.2);
26-
--spectrum-assetlist-item-background-color-selected: rgba(var(--spectrum-blue-900-rgb), 0.1);
25+
--spectrum-assetlist-item-background-color-selected-hover: rgb(var(--spectrum-blue-900-rgb), 0.2);
26+
--spectrum-assetlist-item-background-color-selected: rgb(var(--spectrum-blue-900-rgb), 0.1);
2727
--spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-800);
2828

2929
--spectrum-badge-label-icon-color-primary: var(--spectrum-white);
3030

31-
--spectrum-calendar-day-background-color-selected: rgba(var(--spectrum-blue-900-rgb), 0.1);
32-
--spectrum-calendar-day-background-color-hover: rgba(var(--spectrum-black-rgb), 0.06);
33-
--spectrum-calendar-day-today-background-color-selected-hover: rgba(var(--spectrum-blue-900-rgb), 0.2);
34-
--spectrum-calendar-day-background-color-selected-hover: rgba(var(--spectrum-blue-900-rgb), 0.2);
31+
--spectrum-calendar-day-background-color-selected: rgb(var(--spectrum-blue-900-rgb), 0.1);
32+
--spectrum-calendar-day-background-color-hover: rgb(var(--spectrum-black-rgb), 0.06);
33+
--spectrum-calendar-day-today-background-color-selected-hover: rgb(var(--spectrum-blue-900-rgb), 0.2);
34+
--spectrum-calendar-day-background-color-selected-hover: rgb(var(--spectrum-blue-900-rgb), 0.2);
3535
--spectrum-calendar-day-background-color-down: var(--spectrum-transparent-black-200);
36-
--spectrum-calendar-day-background-color-cap-selected: rgba(var(--spectrum-blue-900-rgb), 0.2);
37-
--spectrum-calendar-day-background-color-key-focus: rgba(var(--spectrum-black-rgb), 0.06);
36+
--spectrum-calendar-day-background-color-cap-selected: rgb(var(--spectrum-blue-900-rgb), 0.2);
37+
--spectrum-calendar-day-background-color-key-focus: rgb(var(--spectrum-black-rgb), 0.06);
3838
--spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-800);
3939
--spectrum-card-selected-background-color-rgb: var(--spectrum-blue-900-rgb);
4040

@@ -56,8 +56,13 @@
5656
--spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-800);
5757

5858
--spectrum-swatch-border-color: rgb(0 0 0 / 51%);
59-
--spectrum-swatch-border-color-light: rgb(0 0 0 / var(--swatch-group-border-opacity));
59+
--spectrum-swatch-border-color-light: rgb(0 0 0 / 42%);
6060

61-
--spectrum-treeview-item-background-color-quiet-selected: rgba(var(--spectrum-gray-900-rgb), 0.06);
62-
--spectrum-treeview-item-background-color-selected: rgba(var(--spectrum-blue-900-rgb), 0.1);
61+
/**
62+
* `--spectrum-swatch-group-border-color` / `--spectrum-swatch-group-border-opacity`
63+
*/
64+
--spectrum-swatchgroup-border-color: rgb(255 255 255 / 20%);
65+
66+
--spectrum-treeview-item-background-color-quiet-selected: rgb(var(--spectrum-gray-900-rgb), 0.06);
67+
--spectrum-treeview-item-background-color-selected: rgb(var(--spectrum-blue-900-rgb), 0.1);
6368
}

0 commit comments

Comments
 (0)